Custom HTML5 video seekbar not working as video progress

Question

I am using react with typescript. I using html5 element range for seek bar. I created two events on the seek bar one is onChange and the second one is onTimeUpdate. The seek bar is working fine when I manually drag it but it does not change when the video is progressing.

here is my code:

const VideoPlayer = () => {
    const seekbarRef = useRef(null);
    const vRef= useRef(null);

    const updateSeekbar = () => {
        let videoReference = vRef.current;
        let seekbarReference = seekbarRef.current;
        if(seekbarReference && videoReference){
            let seekbarMax: number = seekbarReference.max as unknown as number;
            let seekbarDuration: number = videoReference.duration;
            let seekbarCurrentTime: number = videoReference.currentTime;
            let seekbarValue: number = (seekbarMax / seekbarDuration) * seekbarCurrentTime;
            seekbarReference.value = seekbarValue as unknown as string;
        }
    }

    const updateDuration = () => {
        let videoReference = vRef.current;
        let seekbarReference = seekbarRef.current;
        if(seekbarReference && videoReference){
            let seekbarMax: number = seekbarReference.max as unknown as number;
            let videoDuration: number = videoReference.duration;
            let seekbarValue: number = seekbarReference.value as unknown as number;
            let videoCurrentTime: number = videoDuration * (seekbarValue / seekbarMax);
            videoReference.currentTime = videoCurrentTime;
        }
    }

    return <div>
  <video className='video' ref={vRef} autoPlay muted>
  <source src='https://www.w3schools.com/html/movie.mp4' />
</video>
<input className='seekbar' type='range' min='0' max='100' onChange={updateDuration} onTimeUpdate={updateSeekbar} ref={seekbarRef}></input>
</div>
};