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

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

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

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

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
                
            
        )}
    
  )
}