React-Player doesnt comes out / blank

i have some problem, which is my react-player doesnt come out/can't play. i dont know why, i already ask some alternate to chatgpt but it's not working. i dont what the problem, is it the version or just some error variable. so here is the code :
- TrailersSection.jsx

import React, { useState } from 'react' import { dummyTrailers } from '../assets/assets'; import BlurCircle from './BlurCircle'; import ReactPlayer from 'react-player'; import { PlayCircle } from 'lucide-react'; const TrailersSection = () => { const [currentTrailer, setCurrentTrailer] = useState(dummyTrailers[0]); return ( <div className='px-6 md:px-16 lg:px-24 xl:px-44 py-20 overflow-hidden'> <p className='text-gray-300 font-medium text-lg max-w-[960px] mx-auto'>Trailers</p> <div className='relative mt-6'> <BlurCircle top='-100px' right='-100px'/> <ReactPlayer url={currentTrailer.videoUrl} controls={false} className="mx-auto max-w-full" width="960px" height="540px"/> </div> <div className='group grid grid-cols-4 gap-4 md:gap-8 mt-8 max-w-3xl mx-auto'> {dummyTrailers.map((trailer)=> ( <div key={trailer.image} className='relative group-hover:not-hover:opacity-50 hover:-translate-y-1 duration-300 transition max-md:h-60 md:max-h-60 cursor-pointer' onClick={()=> setCurrentTrailer(trailer)}> <img src={trailer.image} className='rounded-lg w-full h-full object-cover brightness-75' alt="trailer" /> {/* <PlayCircleIcon /> */} <PlayCircle strokeWidth={1.6} className="absolute top-1/2 left-1/2 w-5 md:w-8 h-5 md:h-12 transform -translate-x-1/2 -translate-y-1/2"></PlayCircle> </div> ))} </div> </div> ) } export default TrailersSection

and the dummyTrailers is referring to assets.js :

import logo from './logo.svg' import marvelLogo from './marvelLogo.svg' import googlePlay from './googlePlay.svg' import appStore from './appStore.svg' import screenImage from './screenImage.svg' import profile from './profile.png' export const assets = { logo, marvelLogo, googlePlay, appStore, screenImage, profile } export const dummyTrailers = [ { image: "https://img.youtube.com/vi/WpW36ldAqnM/maxresdefault.jpg", videoUrl: 'https://www.youtube.com/watch?v=WpW36ldAqnM' }, { image: "https://img.youtube.com/vi/-sAOWhvheK8/maxresdefault.jpg", videoUrl: 'https://www.youtube.com/watch?v=-sAOWhvheK8' }, { image: "https://img.youtube.com/vi/1pHDWnXmK7Y/maxresdefault.jpg", videoUrl: 'https://www.youtube.com/watch?v=1pHDWnXmK7Y' }, { image: "https://img.youtube.com/vi/umiKiW4En9g/maxresdefault.jpg", videoUrl: 'https://www.youtube.com/watch?v=umiKiW4En9g' }, ]import logo from './logo.svg' import marvelLogo from './marvelLogo.svg' import googlePlay from './googlePlay.svg' import appStore from './appStore.svg' import screenImage from './screenImage.svg' import profile from './profile.png' export const assets = { logo, marvelLogo, googlePlay, appStore, screenImage, profile } export const dummyTrailers = [ { image: "https://img.youtube.com/vi/WpW36ldAqnM/maxresdefault.jpg", videoUrl: 'https://www.youtube.com/watch?v=WpW36ldAqnM' }, { image: "https://img.youtube.com/vi/-sAOWhvheK8/maxresdefault.jpg", videoUrl: 'https://www.youtube.com/watch?v=-sAOWhvheK8' }, { image: "https://img.youtube.com/vi/1pHDWnXmK7Y/maxresdefault.jpg", videoUrl: 'https://www.youtube.com/watch?v=1pHDWnXmK7Y' }, { image: "https://img.youtube.com/vi/umiKiW4En9g/maxresdefault.jpg", videoUrl: 'https://www.youtube.com/watch?v=umiKiW4En9g' }, ] ... }

can you guys please help to fix it.