Моя пользовательская панель поиска не работает должным образом HTML5?

Я делаю видеоплеер в React.js. Я пытаюсь создать пользовательскую панель поиска с синхронизацией с видео, но мой поиск не работает должным образом, как ожидалось, пока пользователь перетаскивает этот GIF. Панель поиска не реагирует на движение пользователя, она возвращается в исходное положение. Надеюсь, этот Gif поможет вам определить проблему

Мой код реакции.

    import React, {Component} from 'react'
import './index.css'

class SampleVideo extends Component{
    state = {
        play:false,
        pause:false,
        onHover:false,
        isMouseDown:false,
        seekedPercentage:"0%"
    };
    componentDidMount(){
        this.video.addEventListener('timeupdate', this.updateProgressBar, false);
    }
    updateProgressBar = () => {
        let percentage = Math.floor((100 / this.video.duration) * this.video.currentTime);
        this.setState({
            seekedPercentage:`${percentage}%`
        });
    };
    handleVideoPausePlay = () => {
      return this.state.play ? this.pause() : this.play();
    };
    play = () => {
        this.video.play();
        this.setState({
            play:true,
            pause:false
        })
    };
    pause = () => {
        this.video.pause()
        this.setState({
            play:false,
            pause:true
        })
    };
    handleSeek = e => {
        if(this.state.isMouseDown){
            console.log("Dragginf")

            let vid_duration = e.nativeEvent.offsetX / this.seek.offsetWidth;
            let percentage = vid_duration * 100;
            this.video.currentTime = vid_duration * this.video.duration;

            this.setState({
                seekedPercentage:`${percentage}%`
            })

        }else {
            console.log('i don;t Move ')
        }
    };
    handleMouseDown = e => {
        this.setState({ isMouseDown:true })
    };
    handleMouseUp = e => {
        this.setState({ isMouseDown:false });
    };
    render(){
       // console.log(this.state);
        return(
            <div className="container">
                <div onMouseEnter={e => this.setState({onHover:true})} onMouseLeave={e => this.setState({ onHover:false })} className="video-wrapper">
                    <video ref={(c) => this.video = c} width="100%" height="100%" controls muted={true}>
                        <source src="vid/test.MKV" type="video/mp4" />
                        <source src="vid/test.MKV" type="video/ogg" />
                        Your browser does not support the video tag.
                    </video>

                    { this.state.onHover ?  <div className="video-controls-container">
                        <div className="vid-title">
                        </div>
                        <div className="vid-control">
                            <div className="vid-seekbar">
                                <div ref={s => this.seek = s} onMouseUp={this.handleMouseUp} onMouseDown={this.handleMouseDown} onMouseMove={this.handleSeek}  className="video-seek-bar">
                                    <div style={{width:this.state.seekedPercentage}} className="videobarlevelbar">
                                    </div>
                                    <div className="seekControl">
                                        <div className="seekImage"><img src="/css/0d20f779-fd6f-49e2-903a-aed7380a00a2.webp" alt="dsvds" /></div>
                                        <div className="seekRound" />
                                    </div>
                                </div>
                            </div>
                            <div className="vid-mini-controller">
                                { !this.state.play ? <div onClick={this.handleVideoPausePlay} className="play-btn">
                                    <svg height="32px" style={{enableBackground: 'new 0 0 24 32'}} version="1.1" viewBox="0 0 24 32" width="24px" xmlSpace="preserve" xmlns="https://w3.org/2000/svg" xmlnsXlink="https://w3.org/1999/xlink"><g id="Layer_1" /><g id="play"><polygon points="0,0 24,16 0,32  " style={{fill: '#fff'}} /></g></svg>
                                </div> : <div onClick={this.handleVideoPausePlay} className="pause-btn">
                                    <svg height="32px" id="svg2" width="32px" version="1.1" viewBox="0 0 32 32" xmlSpace="preserve">
                                        <g id="background">
                                            <rect height="32" width="32" fill="none"/>
                                        </g>
                                        <g id="pause">
                                            <g>
                                                <rect fill="#fff" height="24" width="8" x="20" y="4"/>
                                                <rect fill="#fff" height="24" width="8" x="4" y="4"/>
                                            </g>
                                        </g>
                                    </svg>
                                </div> }



                            </div>
                        </div>
                    </div> : "" }





                </div>
            </div>
        )
    }
}

export default SampleVideo