Get total played time with React Player

I am working on a video subscription site using Django and React. As we will have multiple people who want to make content for us, I would like to be able to track the time a user has spent in any video, then update the database by adding that time when the page is left. This is in order to know how much each video has contributed to our revenue. I am currently using React player to play videos, but I can easily transition to other type of player. Also, if anyone has a better way to track the time without using any player, I would appreciate any answer.

<ReactPlayer
            url={this.state.lectie.link}
            controls
            type="video/mp4"
          />

By looking at react-player's documentation, it has a prop called onProgress which you can pass a callback to and it will give you the following format { played: 0.12, playedSeconds: 11.3, loaded: 0.34, loadedSeconds: 16.7 }. So based on this you could do something like this

function PlayerComponent() {
  const [played, setPlayed] = useState(0);

  // ...

  <ReactPlayer
   onProgress={(progress) => {
       setPlayed(progress.playedSeconds);
     }}
   />
}

and then when your component dismounts, you can send the value of the played variable to the API you want.