Disabling seeking functionality in react-player not working

I'm trying to disable seeking in react-player, so the user needs to watch full video without any skipping. Here is the code I came up with:

import ReactPlayer from "react-player";
import { useRef } from "react";

const MyLessons = () => {
const playerRef = useRef(null);
const prevPlayed = useRef(null);

const handleSeek = () => {
  if (prevPlayed.current) {
    playerRef.current.seekTo(prevPlayed.current.playedSeconds, 'seconds');
  }
};

const handleProgress = (state) => {
  prevPlayed.current = state;
};

return (
  <div className="app">
    <main className="content">
      <div className="player-wrapper">
        <ReactPlayer
          ref={playerRef}
          className="react-player"
          url="lessons/testmp4.MP4"
          width="100%"
          height="100%"
          controls
          config={{ file: { attributes: { controlsList: 'nodownload' } } }}
          onProgress={handleProgress}
          onSeek={handleSeek}
        />
      </div>
    </main>
  </div>
 );
};

export default MyLessons;

When the video starts and user try to skip or seek to specific part of video, the video is reverted to previous point, but the video is paused and can not be resumed afterwards.

Also, in controls (bottom left corner of ReactPlayer) play button switches from play to resume button non-stop, seems like it is in loop trying to continue but something is stopping it.

Any suggestions how this can be fixed?

Seems like it's not possible with ReactPlayer to do that. Ended up with disabling controls and creating custom play/mute buttons:

const Lesson = () => {
const [isPlaying, setIsPlaying] = useState(true);
const [isMuted, setIsMuted] = useState(false);
const handlePlayPause = () => {
setIsPlaying(!isPlaying);
};
const handleMuteUnmute = () => {
setIsMuted(!isMuted);
};
return (
<div className="app-video">
<ReactPlayer
className="react-player"
url="lessons/test1mp4.MP4"
width="100%"
height="100%"
playing={isPlaying}
volume={isMuted ? 0 : 0.5}
controls={false}
onEnded={() => {
console.log("ended");
}}
config={{
file: {
attributes: {
playsInline: true,
},
},
}}
/>
</div>
<div className="bottom-panel">
<Button
className={`control-button ${isPlaying ? "pause" : "play"}`}
onClick={handlePlayPause}
startIcon={isPlaying ? <PauseIcon /> : <PlayArrowIcon />}
>
{isPlaying ? "Pause" : "Play"}
</Button>
<Button
className={`control-button ${isMuted ? "unmute" : "mute"}`}
onClick={handleMuteUnmute}
startIcon={isMuted ? <VolumeOffIcon /> : <VolumeUpIcon />}
>
{isMuted ? "Unmute" : "Mute"}
</Button>
</div>
);
};
export default Lesson;

A thing here I believe that can be useful rather than disabling your controls:

const videoRef = useRef<ReactPlayer>(null)
const [played, setPlayed] = useState(0)

return (
     <ReactPlayer
          config={{
                file: { attributes: { controlsList: 'nodownload' } },
          }}
          onContextMenu={(e) => e.preventDefault()}
          url={video.link} // Replace with your video URL
          controls // Enable video player controls
          width="100%"
          height="auto"
          ref={videoRef}
          onProgress={() => {
                videoRef.current.getCurrentTime() >= played &&
                setPlayed(videoRef.current.getCurrentTime())
          }}
          onSeek={() => {
                videoRef.current.getCurrentTime() > played &&
                videoRef.current.seekTo(played)
          }}
     />
)

So, whenever the user tries to seek future frames, their playback is redirected to what's in the played state. They can go back in the previous frames but going to future frames would put them back to where the farthest seconds they have progressed.