Add safer refresh on InteractiveExample (#6057)

Before when page was loading, there was a chance that `width` value
wouldn't be passed to component in `InteractiveComponent` - in other
words the `width` will be passed to component before it had become
something other than `null`, and there won't be a rerender after width
gets a number value. After this change, with `useEffect` hook, we
monitor if width has changed and if so, we trigger a rerender that
guarantees our component will always get correct width.

docs/src/components/InteractiveExample/index.tsx

@@ -109,6 +109,12 @@ export default function InteractiveExample({
     }
   }, [interactiveExampleRef.current]);
 
+  React.useEffect(() => {
+    if (width !== null) {
+      setKey(key + 1);
+    }
+  }, [width]);
+
   const prefersReducedMotion = useReducedMotion();
 
   return (