useTrail throwing error that I cannot figure out

[c-t-y]

I'm trying to make an animation using Three (react-three-fiber specifically) where a bunch of spheres have a staggered way of appearing and then disappearing.

Here is my code using useTrail:

  const props = useTrail(10, {
    config: { mass: 1, tension: 120, friction: 14, clamp: true },
    to: [{ scale: [1, 1, 1] }, { scale: [0, 0, 0] }],
    from: { scale: [0, 0, 0] },
  });

and in my return:

{props.map((el, i) => {
        return (
          <a.mesh
            ref={moreSpheres}
            scale={el.scale}
            key={i}
            position={[i * Math.random(), i * Math.random() + 1, i]}>
            <sphereBufferGeometry attach="geometry" args={[1, 45, 45]} />
            <meshLambertMaterial
              attach="material"
              wireframe={true}
              color={colorsArr[Math.floor(Math.random() * 6)]}
            />
          </a.mesh>
        );
      })}

However sometimes it throws this error in my console:

three.js:1305 Uncaught (in promise) TypeError: Cannot read property 'parent' of undefined
    at three.js:1305
    at Array.reduce (<anonymous>)
    at Controller.diff (three.js:1292)
    at three.js:1238
    at new Promise (<anonymous>)
    at three.js:1238

It only throws this half of the time, and there is a noticeable slowdown/lag when it does happen, but my app does not crash entirely.

Any help would be appreciated!

[aleclarson]

Seems like an issue with react-three-fiber