Unexpected behavior with props in two separate models

[hedonicadapter]

I'm trying to use props to play and pause two video textures, so that when one is playing, the other is paused and vice versa. The problem is that only one button at a time seems to be working (but also sometimes neither of them), and only the first video can be played/paused. The problem might be similar to #907 but I don't understand what's happening.

repro: https://codesandbox.io/s/buster-2-5ovlk2?file=/src/App.js

const [firstPlay, setFirstPlay] = useState(false)
const [secondPlay, setSecondPlay] = useState(false)

<Canvas>
  ...
  <Suspense fallback={null}>
    <Model play={firstPlay} /> // Only this one responds to prop changes?
  </Suspense>
</Canvas>

<Canvas>
  ...
  <Suspense fallback={null}>
    <Model play={secondPlay} />
  </Suspense>
</Canvas>

function Model({play}) {
  const texture = useVideoTexture(url)

  useEffect(() => {
    play ? texture.source.data.play() : texture.source.data.pause()
  }, [play, texture.source.data])

  return (
    <mesh>
      <planeGeometry />
      <meshStandardMaterial map={texture} />
    </mesh>
  )
}

[hedonicadapter]

Don't think this was a drei issue. Solved by importing two different videos.

import url from '../public/rhinos.mp4'
import url2 from '../public/rhinos2.mp4'