react-player SeekTo is not a function - reactjs

Question

I am using react-player with my next.js site and am having trouble using seekTo function. It results in error saying: "playerRef.seekTo is not a function"
I tried "playerRef.current.seekTo(parseFloat(e.target.value))" as well but same error occurs..
My code is based on react-player demo repo: https://github.com/cookpete/react-player/blob/master/src/demo/App.js
import { useRef } from "react";
const ReactPlayer = dynamic(() => import("react-player"), { ssr: false });
const Player = ({url}) => {
const playerRef = useRef();
const [player, setPlayer] = useState({
playing: true,
muted: true,
played: 0,
loaded: 0,
duration: 0,
seeking:false
});
const handlePlayPause = function () {
setPlayer({ ...player, playing: !player.playing });
};
const handleMuted = () => {
setPlayer({ ...player, muted: !player.muted });
};
const handleSeekMouseDown = (e) => {
setPlayer({ ...player, seeking: true });
};
const handleSeekChange = (e) => {
setPlayer({ ...player, played: parseFloat(e.target.value) });
};
const handleSeekMouseUp = (e) => {
setPlayer({ ...player, seeking: false });
playerRef.seekTo(parseFloat(e.target.value));
};
const handleProgress = (state) => {
if (!player.seeking) {
setPlayer(state);
}
};
return (
<div
className={`relative justify-center content-center w-full`}
>
<ReactPlayer
ref={playerRef}
className="absolute rounded"
width="100%"
height="100%"
url={url}
volume={1}
playIcon={<></>}
playing={player.playing}
loop={true}
muted={player.muted}
onProgress={handleProgress}
></ReactPlayer>
<div
className={"absolute w-full h-full"}
onClick={handlePlayPause}
></div>
<div>
<input
type="range"
min={0}
max={0.999999}
step="any"
value={player.played}
onMouseDown={handleSeekMouseDown}
onChange={handleSeekChange}
onMouseUp={handleSeekMouseUp}
/>
</div>
</div>
);
};
export default Player;
Thank you

Answer 1

create another component and pass the ref and other props to this component and import ReactPlayer manually
create VPlayer.jsx ==>
import React from "react";
import ReactPlayer from "react-player";
const VPlayer = ({
playerRef,
}) => {
return (
<ReactPlayer
ref={playerRef}
/>
);
};
export default VPlayer;
import that component dynamically and pass the props to it
and use it in another component or pages ==>
import React, {useRef} from "react";
import dynamic from "next/dynamic";
const VPlayer = dynamic(() => import("./VPlayer"), {
ssr: false,
});
const VideoPlayer = () => {
const videoRef = useRef();
return (
<VPlayer
playerRef={videoRef}/>
)
}
export default VideoPlayer;

Answer 2

playerRef is just a ref, to access it's actual value you need to use its current property, i.e
const handleSeekMouseUp = (e) => {
setPlayer({ ...player, seeking: false });
playerRef.current?.seekTo(parseFloat(e.target.value));
};