VideoJS – Is there a way to display the video duration in HH:SS format before the video plays

I would like to display the duration of the video in the VideoJS skin as a thumbnail while the video is not playing.

I have the following code but cannot see how to implement this via JS SDK in React.

Here is an example of how I would like the duration display to look:

video-js-duration-display-preview-window

Here is my code so far:

const VideoJsPlayer = ({ src, divStyle, autoPlay = true }) => {
  const videoRef = React.useRef(null);
  const playerRef = React.useRef(null);

  React.useEffect(() => {
    if (!window) return;
    if (window.videojs && src) {
      if (!playerRef.current) {
        const videoElement = videoRef.current;

        if (!videoElement) return;

        playerRef.current = window.videojs(videoElement);
      } else {
        // You can update player in the `else` block here, for example:
        // player.autoplay(options.autoplay);
        // player.src(options.sources);
      }
    }
  }, [src]);

  return (
    <div
      data-vjs-player
      style={{ width: '100%', objectFit: 'cover', ...divStyle }}
    >
      <video
        ref={videoRef}
        className={clsx([
          'video-js',
          'vjs-big-play-centered',
          styles.videoJsClass,
        ])}
        controls
        autoPlay={autoPlay}
        preload="auto"
        width="100%"
        height="400px"
        data-setup="{}"
      >
        <source src={src + '#t=0.001'} type="video/mp4" />
        <p className="vjs-no-js">
          To view this video please enable JavaScript, and consider upgrading to
          a web browser that supports HTML5 video
        </p>
      </video>
    </div>
  );
};

I can see the documentation here and have access to the player object by playerRef.current. But how to add this title like pictured above?