fix: remove typescript errors in trail story by refactoring the code

.storybook/stories/Trail.stories.tsx

@@ -50,50 +50,63 @@ function TrailScene() {
 export const TrailsSt = () => <TrailScene />
 TrailsSt.storyName = 'Default'
 
-function UseTrailScene() {
-  const [sphere, setSphere] = React.useState<Mesh>(null!)
-  const instancesRef = React.useRef<InstancedMesh>(null!)
-  useFrame(({ clock }) => {
-    const t = clock.getElapsedTime()
-
-    sphere.position.x = Math.sin(t) * 3 + Math.cos(t * 2)
-    sphere.position.y = Math.cos(t) * 3
-  })
+type TheTrailProps = {
+  sphereRef: React.RefObject<Mesh>
+  instancesRef: React.RefObject<InstancedMesh>
+}
 
-  const trailPositions = useTrail(sphere, { length: 5, decay: 5, interval: 6 })
+// Trail component
+function TheTrail({ sphereRef, instancesRef }: TheTrailProps) {
+  const trailPositions = useTrail(sphereRef.current!, { length: 5, decay: 5, interval: 6 })
   const n = 1000
+  const oRef = React.useRef(new Object3D())
 
-  const [o] = React.useState(() => new Object3D())
-  function updateInstances() {
-    if (!instancesRef.current) return
-
+  useFrame(() => {
+    if (!instancesRef.current || !trailPositions.current) return
+    const o = oRef.current
     for (let i = 0; i < n; i += 1) {
-      const x = trailPositions.current?.slice(i * 3, i * 3 + 3)
-      // @ts-ignore
-      o.position.set(...x)
+      const [x, y, z] = trailPositions.current.slice(i * 3, i * 3 + 3)
 
+      o.position.set(x, y, z)
       o.scale.setScalar((i * 10) / n)
       o.updateMatrixWorld()
 
       instancesRef.current.setMatrixAt(i, o.matrixWorld)
     }
 
-    instancesRef.current.count = n
     instancesRef.current.instanceMatrix.needsUpdate = true
-  }
+  })
 
-  useFrame(updateInstances)
+  return (
+    <instancedMesh ref={instancesRef} args={[null!, null!, n]}>
+      <boxGeometry args={[0.1, 0.1, 0.1]} />
+      <meshNormalMaterial />
+    </instancedMesh>
+  )
+}
+
+function UseTrailScene() {
+  const sphereRef = React.useRef<Mesh>(null!)
+  const instancesRef = React.useRef<InstancedMesh>(null!)
+
+  const [isSphereReady, setIsSphereReady] = React.useState(false)
+  React.useEffect(() => {
+    if (sphereRef.current) setIsSphereReady(true)
+  }, [sphereRef.current])
+
+  useFrame(({ clock }) => {
+    const t = clock.getElapsedTime()
+
+    sphereRef.current.position.x = Math.sin(t) * 3 + Math.cos(t * 2)
+    sphereRef.current.position.y = Math.cos(t) * 3
+  })
 
   return (
     <>
-      <Sphere ref={setSphere} args={[0.1, 32, 32]} position-x={0} position-y={3}>
+      <Sphere ref={sphereRef} args={[0.1, 32, 32]} position-x={0} position-y={3}>
         <meshNormalMaterial />
       </Sphere>
-
-      <instancedMesh ref={instancesRef} args={[null!, null!, n]}>
-        <boxGeometry args={[0.1, 0.1, 0.1]} />
-        <meshNormalMaterial />
-      </instancedMesh>
+      {isSphereReady && <TheTrail sphereRef={sphereRef} instancesRef={instancesRef} />}
     </>
   )
 }