Javascript – I want to render movies in a watchlist component, but it won't let me

I have built a little movie database and want to display movies to my watchlist. I can search for movies, but when I want to add them to my watchlist, it only gets rendered in my Homescreen component, not in my WatchList component. This is how it looks and what I tried so far. HomeScreen is passing the movies as props to the MovieList component. It will show me all the movies I am searching for. When I now click on the "Add to Watchlist" button, I want the movie to be added to my watchlist (WatchList component). But so far the WatchList component is empty, the movies will only show on my HomeScreen component.

import React from 'react'
import { useEffect, useState } from 'react';
import "./HomeScreen.css"
import MovieList from './componnents/MovieList';
import Header from './componnents/Header';
import AddWatchlist from './componnents/AddWatchlist';
import WatchList from './componnents/WatchList';

function HomeScreen() {
    const [movies, setMovies] = useState([]);
    const [watchList, setWatchList] = useState([]);
    const [searchValue, setSearchValue] = useState('');
  
    const getMovieRequest = async (searchValue) => {
      const url = `http://www.omdbapi.com/?s=${searchValue}&apikey=93fe1299`;
      const response = await fetch(url);
      const responseJson = await response.json();
  
      if (responseJson.Search) {
        setMovies(responseJson.Search);
      }
    };
  
    useEffect (() => {
      getMovieRequest(searchValue);
    }, [searchValue]);

    const addToWatchlist = (movie) => {
      const newWatchList = [...watchList, movie];
      setWatchList(newWatchList);
    };

  return (
    <div className="HomeScreen">
        <Header searchValue={searchValue} setSearchValue={setSearchValue}/>
    <div className='movie__row'>
        <MovieList movies={movies} handleWatchlist={addToWatchlist} watchlistComponent={AddWatchlist}/>
    </div>
    <div className='movie__row'>
        <WatchList watchList={watchList}/>
    </div>
  </div>
  );
}

export default HomeScreen

import React from 'react'
import "./MovieList.css"

const MovieList = (props) => {
  const WatchlistComponent = props.watchlistComponent;
  return (
    <>
    {props.movies.map((movie, index) =>
      <div className='image__container'>
        <img src={movie.Poster} alt='movie'></img>
        <div onClick={()=> props.handleWatchlist(movie)} className='add__watchlist'>
          <WatchlistComponent/>
        </div>
      </div>
     )}
    </>
  )
}

export default MovieList;

import React from 'react'
import "./WatchList.css"

function WatchList({watchList}) {
  if (!watchList) {
    return null;
}

  return (
    <div className='watchlist'>
    <h2>Watch List</h2>
    {watchList.map((movie) => (
      <img src={movie.Poster} />
    ))}
  </div>
);
}

export default WatchList