i am trying to get the information from my movies.js file to be display on the player page based on the param

here is my progress so far on the code

    const playBtn = document.querySelector('.playBtn');
    const pauseBtn = document.querySelector('.pauseBtn');
    const forwardBtn = document.querySelector('.forwardBtn');
    const prevBtn = document.querySelector('.prevBtn');
    const vid = document.getElementById("movieDisplay");
    const { name } = useParams();
    const [movie, setMovie] = useState()

    useEffect(() => {
        // Find the movie data that matches the URL parameter
        const matchedMovie = movies.find((movie) => movie.title === name);
        setMovie(matchedMovie);
        
      }, [name]); // Re-run the effect when the URL parameter changes
      console.log(movie)

this code responded with no error just an blank screen