Netflix clone, mapping different trailers

Question

I'm making a Netflix clone site. I want the trailers of the movies to play when the mouse is hovered over the movie posters. I did this for the big trailer section at the top. But when you hover over any of the posters arranged side by side at the bottom, all the movies in that series play the same trailer instead of a single movie. The reason is because I made that array with the map method. How can I do this like on Netflix? Code and pictures are below.

this row

 {movies.map((movie) => (
        <>
          {trailerUrl && (
            <div className="trailer-content">
              <Youtube
                className="trailer"
                videoId={trailerUrl}
                opts={opts}
              />
            </div>
          )}
          {!trailerUrl && (
            <div key={movie.id} className="all-hover">
              {
                <img
                  onMouseLeave={() => setTrailerUrl("")}
                  onMouseEnter={() => handleEnter(movie)}
                  className={`row-poster ${
                    isLargeRow && "row-poster-large"
                  }`}
                  src={`${photo_base_URL}${
                    isLargeRow ? movie.poster_path : movie.backdrop_path
                  }`}
                  alt={movie.name}
                />
              }......

this picture issue