I'm using ReactPlayer to play a live HLS video stream, and i want to display the current playing clock time. How do i do so?

What I've Tried:

I attempted to calculate the playing clock time using requestVideoFrameCallback combined with getCurrentTime() and getDuration() from ReactPlayer:

const currentPlayingClockTime = Date.now() - (duration - currentTime) * 1000

However, this approach is unreliable. The displayed time is inconsistent, sometimes running too fast and other times jumping back a few seconds.

Background:

• The video source is an Ethernet camera streaming via RTSP.
• I use MediaMTX to convert RTSP to HLS for playback in ReactPlayer.