Это потому, что вы делаете рендеринг react-jsx модального окна для каждого react-dom фильма в вашем списке.

Извлеките react.js модальное окно из функции react.js map и оставьте его дочерним reactjs элементом компонента, где react.js он не зависит от каких-либо react-component условий, какого-либо сопоставленного react-jsx списка или чего-либо еще reactjs для его рендеринга. Это своего react-jsx рода соглашение (по крайней react-dom мере, среди кодовых баз, с react-component которыми я сталкивался) помещать react.js модальные окна в конец компонента reactjs JSX как прямой дочерний элемент react-dom корневого элемента компонента.

Скрыть reactjs его по умолчанию и показывать react-jsx только тогда, когда пользователь react-component нажимает на фильм, передавая reactjs соответствующую информацию react-component в модальное окно.

Это может react.js выглядеть примерно так:

function Watchlist() {
  const { watchlist } = useContext(GlobalContext);
  const [modal, setModal] = useState(false);
  const [selectedMovie, setSelectedMovie] = useState({});

  const toggleModal = () => {
      setModal(!modal);
  }

  return (
    

        
your watchlist

        {watchlist.length > 0 ? (
          

            {watchlist.map((movie, index) => {

              // Render the mapped list of JSX elements (movie cards?)
              // Potentially the `onClick` event would trigger the `setSelectedMovie` function in addition to setting `toggleModal`

            })}
          
        ) : (
          
Add some movies!
        )}
        {modal && (
            

                

                    
                    X
                
            
        )}
    
  )
}