React: How to attach a MediaStreamTrack to a Video element?

Question

Hey so what I'm trying to a do is track a MediaStreamTrack that is stored locally in memory and then play in the user's browser using an html5 video element. This what I have currently:

const VideoTrack = ({ track }) => {
  useEffect(() => {
    const el = ref.current 
    track.attach(el)
    return () => {
      track.detach(el)
    }
  }, [track])

  return (
    <video
      ref={ref}
    />
  ) }

The problem with this is that the video will at first paint as empty / blank, and only after the useEffect function is called will the page re-render with the MediaStreamTrack attached to it. This causes a very noticeable flicker.

I wish there was a simpler way to be like

<video track={track} /> 

does anything like that exist? So that we can render the MediaStreamTrack and the HTML5 video element all at the same time?