Youtube API For Playlist Working Without Skip

I’m working on a React app and aiming to integrate a feature similar to YouTube playlists. The goal is to allow users to start a playlist and prevent them from skipping videos within the playlist just wanted that playlist cant be skipped and remove recommdation but cant figure out it please helpout any unique feature you thinki will aslo be good thankyou

import React, { useState } from 'react';
import YouTube from 'react-youtube';

const playlists = [
  {
    link: 'https://www.youtube.com/playlist?list=PLrEHtFUVEYE88BNHtLTlkZykS0jF_QaNH&jct=EMYMWuf98p83qC9FznbdrgWTV1ne7A',
    title: 'Crash Course Economics',
    description: 'In 35 episodes, Adriene Hill and Jacob Clifford teach you economics!',
    badgeName: 'Economics Badge',
  },
];

const extractPlaylistId = (link) => {
  const urlParams = new URLSearchParams(new URL(link).search);
  return urlParams.get('list');
};

const EducationRecommendation = () => {
  const [selectedPlaylist, setSelectedPlaylist] = useState(null);
  const [showPopup, setShowPopup] = useState(false);
  const [courseStarted, setCourseStarted] = useState(false);
  const [courseCompleted, setCourseCompleted] = useState(false);
  const [player, setPlayer] = useState(null);
  const [completedCourses, setCompletedCourses] = useState([]);

  const handleStartCourse = (playlist) => {
    setSelectedPlaylist(playlist);
    setShowPopup(true);
  };

  const confirmStartCourse = () => {
    setCourseStarted(true);
    setCourseCompleted(false);
    setShowPopup(false);
  };

  const onPlayerReady = (event) => {
    setPlayer(event.target);
    if (courseStarted) {
      event.target.playVideo();
    }
  };

  const onPlayerStateChange = (event) => {
    if (event.data === 1 && courseStarted) { // Playing
      event.target.unMute();
    } else if (event.data === 0) { // Ended
      const currentIndex = player.getPlaylistIndex();
      const playlistLength = player.getPlaylist().length;
      if (currentIndex === playlistLength - 1) {
        setCourseCompleted(true);
        setCourseStarted(false);
        setCompletedCourses([...completedCourses, selectedPlaylist.badgeName]);
      }
    } else if (event.data === 3 && courseStarted) { // Buffering
      const currentIndex = player.getPlaylistIndex();
      const currentTime = player.getCurrentTime();
      const duration = player.getDuration();
      if (currentIndex !== 0 || currentTime < duration * 0.9) {
        player.seekTo(currentTime);
      }
    }
  };

  return (
    <div>
      <h2>Educational Content Recommendations</h2>
      <div className="video-list">
        {playlists.map((playlist) => {
          const playlistId = extractPlaylistId(playlist.link);
          return (
            <div key={playlistId} className="video-item">
              <YouTube
                videoId=""
                opts={{
                  playerVars: {
                    listType: 'playlist',
                    list: playlistId,
                    disablekb: 1,
                    controls: 0,
                    rel: 0,
                    fs: 0,
                    iv_load_policy: 3,
                    modestbranding: 1,
                    showinfo: 0,
                  },
                }}
                onReady={onPlayerReady}
                onStateChange={onPlayerStateChange}
              />
              <h3>{playlist.title}</h3>
              <p>{playlist.description}</p>
              <button onClick={() => handleStartCourse(playlist)}>Start Course</button>
            </div>
          );
        })}
      </div>

      {showPopup && (
        <div className="popup">
          <div className="popup-content">
            <p>Do you want to start this course? Once started, you won't be able to skip videos.</p>
            <button onClick={confirmStartCourse}>Yes</button>
            <button onClick={() => setShowPopup(false)}>No</button>
          </div>
        </div>
      )}

      {courseCompleted && (
        <div className="badge-popup">
          <div className="popup-content">
            <p>Congratulations! You've completed the course and earned a badge!</p>
            <p>Earned Badge: {completedCourses[completedCourses.length - 1]}</p>
          </div>
        </div>
      )}
    </div>
  );
 };

export default EducationRecommendation;