seekTo() in ReactPlayer not working for YouTube links

Question

I was creating a music player that will use the youtube API. Now I have created a PLayer named it as MainPlayer.JS. The progress bar is working fine with the proper time but I am unable to add the feature of seeking the progress bar to forward the music. The progress bar is in another component named as SeekBar.JS.

Can anyone please help me to figure out how to add the Seek feature in my music app. I am using React.JS for building the project. I am using this package for the music player named react-player

The code for the MainPlayer.JS is

import React, { useContext, useState, useRef } from 'react'
import ReactPlayer from 'react-player'

import Play from './Play'
import Pause from './Pause'
import Previous from './Previous'
import Next from './Next'
import Dark from './Dark'
import Light from './Light'
import SeekBar from './SeekBar'
import { TitleContext, IdContext, ImageContext, ChannelContext }
  from '../VideoContext';

function Player() {

  const { title, setTitle } = useContext(TitleContext);
  const { id, setId } = useContext(IdContext);
  const { image, setImage } = useContext(ImageContext);
  const { channel, setChannel } = useContext(ChannelContext);

  const url = `https://www.youtube.com/watch?v=${id}`;

  const [playing, setPlaying] = useState(false)
  const [rotate, setRotate] = useState(false)
  const [dark, setDark] = useState(false)
  const [played, setPlayed] = useState(0.00)
  const [duration, setDuration] = useState(0.0)
  /*const [loaded,setLoaded] = useState(0)*/
  const [seeking,setSeeking] = useState(false)

  //Play
  const handlePlay = () => {
    setPlaying(true)
    setRotate(true)
  }
  //Pause
  const handlePause = () => {
    setPlaying(false)
    setRotate(false)
  }
  //Play or Pause
  const handlePlayPause = () => {
    if (playing === true)
      handlePause()

    else
      handlePlay()
  }
  // Toggle Theme
  const toggleTheme = () => {
    if (dark === true) {
      setDark(false)
    }
    else {
      setDark(true)
    }
  }

  const musicPlayer = useRef(null);
  return (
    <div className={dark ? "playerlight" : "playerdark"}>

      <div onClick={toggleTheme} className="themeIcon">
        {dark ? <Dark /> : <Light />}
      </div>

      <div style={{ 'display': 'none' }}>
        <ReactPlayer ref={musicPlayer} url={url} playing={playing}
          onReady={handlePlay} onEnded={handlePause}
          onProgress={e => { setPlayed(e.playedSeconds) }}
          onDuration={e => { setDuration(e) }} 
          onSeek={e => console.log(e)}/>
      </div>
      <img src={image} id="playerImage" className={rotate ? "rotate" : ""} />

      <div className='songData'>
        <span style={{ marginLeft: '-4vh' }}>Song :&nbsp;</span>
        <b>{title}</b>
      </div>
      <div className='songData'>
        <span style={{ marginLeft: '-4vh' }}>Channel :&nbsp;</span>
        <b>{channel}</b>
      </div>
      <div>
        <SeekBar played={played} duration={duration} setPlayed={setPlayed}/>

      </div>
      <div>
        <Previous/>
        <Next/>
        <div onClick={handlePlayPause} className="playPause">
          {playing ? <Pause /> : <Play />}
        </div>
      </div>
    </div>
  )
}

export default Player

The code for SeekBar.JS is

        import React from 'react'

    function SeekBar({ played, duration,setPlayed }) {

        const secToHHMMSS = (secs) => {

            const pad = (num) => {
                return ("0" + num).slice(-2);
            }
            var minutes = Math.floor(secs / 60);
            secs = secs % 60;
            var hours = Math.floor(minutes / 60)
            minutes = minutes % 60;
            if(hours === 0) {return `${pad(minutes)}:${pad(secs)}`;}
            else if(hours !== 0){return `${pad(hours)}:${pad(minutes)}:${pad(secs)}`;}
        }
        var newPlayed = secToHHMMSS(Math.round(played));
        var newDuration = secToHHMMSS(duration);
        return (
            <div style={{ marginBottom: '10vh' }}>

                <input style={{ width: '90%', margin: '0 5% 0 5%', height: '2px',borderRadius:'10%' }} className="slider"
                type='range' min={0} value={Math.round(played)} max={duration} 
                onChange={e => setPlayed(e.target.value)}/>

                <span style={{ float: 'left', marginLeft: '5%', marginTop:'3%' }}>{newPlayed}</span>
                <span style={{ float: 'right', marginRight: '5%', marginTop:'3%' }}>{newDuration}</span>
            </div>
        )
    }

    export default SeekBar