chore: fix sandbox

README.md

@@ -754,7 +754,7 @@ useFrame((_, delta) => {
 #### MotionPathControls
 
 <p>
-  <a href="https://codesandbox.io/s/drei-motion-path-controls-d9x4yf"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/drei-motion-path-n75jcq/screenshot.png" alt="Demo"/></a>
+  <a href="https://codesandbox.io/s/2y73c6"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/2y73c6/screenshot.png" alt="Demo"/></a>
 </p>
 
 Motion path controls, it takes a path of bezier curves or catmull-rom curves as input and animates the passed `object` along that path. It can be configured to look upon an external object for staging or presentation purposes by adding a `focusObject` property (ref).
@@ -764,7 +764,7 @@ type MotionPathProps = JSX.IntrinsicElements['group'] & {
   curves?: THREE.Curve[] // The curves from which the curve path is constructed, default: []
   debug?: boolean // show the path on which the object animates, default: false
   object?: React.MutableRefObject<THREE.Object3D> // default: default camera
-  focus?: [x: number, y: number, z: number] | React.MutableRefObject<THREE.Object3D> // default: undefined
+  focus?: [x: number, y: number, z: number] | React.MutableRefObject<THREE.Object3D> // default: undefined
   offset?: number // manually progress the object along the path (0 - 1), default: undefined
   smooth?: boolean // whether or not to smooth out the curve path, default: false
   eps?: number // End of animation precision, default: 0.00001
@@ -789,7 +789,7 @@ function Loop({ factor = 0.2 }) {
   <cubicBezierCurve3 v0={[6, 3, 0]} v1={[10, 5, 5]} v2={[5, 5, 5]} v3={[5, 5, 5]} />
   <Loop />
 </MotionPathControls>
-  
+
 <Box args={[1, 1, 1]} ref={poi}/>
 
 ```
@@ -813,13 +813,12 @@ const poi = useRef()
       new THREE.Vector3(5, 3, 5),
       new THREE.Vector3(5, 5, 5)
     ),
-  ]}          
+  ]}
 />
 
 <Box args={[1, 1, 1]} ref={poi}/>
 ```
 
-
 # Gizmos
 
 #### GizmoHelper
@@ -1205,13 +1204,13 @@ export type FacemeshProps = {
   /** a landmark index (to get the position from) or a vec3 to be the origin of the mesh. default: undefined (ie. the bbox center) */
   origin?: number | THREE.Vector3
   /** A facial transformation matrix, as returned by FaceLandmarkerResult.facialTransformationMatrixes (see: https://developers.google.com/mediapipe/solutions/vision/face_landmarker/web_js#handle_and_display_results) */
-  facialTransformationMatrix?: typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.facialTransformationMatrixes[0]
+  facialTransformationMatrix?: (typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.facialTransformationMatrixes)[0]
   /** Apply position offset extracted from `facialTransformationMatrix` */
   offset?: boolean
   /** Offset sensitivity factor, less is more sensible */
   offsetScalar?: number
   /** Fface blendshapes, as returned by FaceLandmarkerResult.faceBlendshapes (see: https://developers.google.com/mediapipe/solutions/vision/face_landmarker/web_js#handle_and_display_results) */
-  faceBlendshapes?: typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.faceBlendshapes[0]
+  faceBlendshapes?: (typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.faceBlendshapes)[0]
   /** whether to enable eyes (nb. `faceBlendshapes` is required for), default: true */
   eyes?: boolean
   /** Force `origin` to be the middle of the 2 eyes (nb. `eyes` is required for), default: false */
@@ -2904,7 +2903,7 @@ function SuzanneFBX() {
   let fbx = useFBX('suzanne/suzanne.fbx')
   return <primitive object={fbx} />
 }
-````
+```
 
 #### useTexture