Exposing currentTime with JSX Video

[RyanSmithYetiCGI]

In the following code snippet, I'm attempting to use an array of JSX frame elements and overlay them over a video whenever the "currentTime" property changes:

const RenderMediaWithOverlay = ({ dataSrc, frameElements }) => {

  const videoRef = useRef(null);

  useEffect(() => {
    const video = videoRef.current;
    const handleTimeUpdate = () => {
      const currentTime = video?.currentTime ?? 0;
      const closestFrameIndex = findClosestFrame(currentTime, frames);
      if (closestFrameIndex !== currentFrame) {
        setCurrentFrame(closestFrameIndex);
      }
    };

    if (video) {
      video.addEventListener('timeupdate', handleTimeUpdate);
    }

    return () => {
      if (video) {
        video.removeEventListener('timeupdate', handleTimeUpdate);
      }
    };
  }, [frames, currentFrame]);

  return (
    <div style={{ position: 'relative', width: '100vw', height: '100vh' }}>
      <video ref={videoRef} src={dataSrc} width="100%" height="100%" controls />
      {frameElements[currentFrame]}
    </div>
  );
}

In this code snippet though, logging "video" indicates that currentTime is not exposed. For my current scenario I need that exposed to properly execute what I have in mind. Please and thank you!

[RyanSmithYetiCGI]

Thank you much! :)