AddFavourites Component in my React app is not iterable

I am really new to React js and I am working on a basic movie app. I have an 'Addfavourites' component which adds a movie to favourites when clicked.

import React from "react";

import React from "react";

const AddFavourite = () => {
    return (
        <>
            <span className="mr-2">Add To Favourites</span>
            <svg 
                xmlns="http://www.w3.org/2000/svg" 
                width="16" height="16" 
                fill="red" 
                className="bi bi-heart-fill" 
                viewBox="0 0 16 16"
            >
                <path 
                    fill-rule="evenodd"
                    d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"
                />
            </svg>
        </>
    )

}



export default AddFavourite

However, when I try to add, I get an error message: Uncaught TypeError: Favourites is not iterable.

I know what I should do but don't just know how I should do it. Please help.

This is the parent component:

import React, { useState, useEffect } from 'react';
import MovieList from "./components/MovieList"
import 'bootstrap/dist/css/bootstrap.min.css'
import './App.css'
import MovieListHeading from './components/MovieListHeading';
import SearchBox from './components/SearchBox';
import AddFavourites from './components/AddFavourites';
import RemoveFavourites from './components/RemoveFavourites';


const App = () => {
  const [movies, setMovies] = useState ([]);
  const [searchValue, setSearchValue] = useState('');
  const [favourites, setFavourites] = useState ([]);

  const getMovieRequest = async (searchValue) => {
    const url = `http://www.omdbapi.com/?s=${searchValue}&apikey=20019eab`;

    const response = await fetch(url);
    const responseJson = await response.json();

    if (responseJson.Search) {
      setMovies(responseJson.Search);
    }
  };

  useEffect(() => {
    getMovieRequest(searchValue);
  }, [searchValue]);

  useEffect(() => {
    const movieFavourites = JSON.parse (
      localStorage.getItem('react-movie-app-favourites')
    );

    setFavourites(movieFavourites);
  }, []);

  const saveToLocalStorage = (items) => {
    localStorage.setItem ('react-movie-app-favourites', JSON.stringify(items))
  };

  const addFavouriteMovie = (movie) => {
    const newFavouriteList = [...favourites, movie];
    setFavourites(newFavouriteList);
    saveToLocalStorage(newFavouriteList);
  }

  const removeFavouriteMovie = (movie) =>{
    const newFavouriteList = favourites.filter (
      (favourite) => favourite.imdbID !== movie.imdbID
    );

    setFavourites(newFavouriteList);
    saveToLocalStorage(newFavouriteList);
  }

  return (
    <div className='container-fluid movie-app'>
      <div className='row d-flex align-items-center mt-4 mb-4' >
        <MovieListHeading heading ='The Movie App' />
        <SearchBox searchValue = {searchValue} setSearchValue = {setSearchValue}/>
      </div>
      <div className='row'>
        <MovieList 
          movies = {movies} 
          handleFavouritesClick = {addFavouriteMovie} 
          favouriteComponent = {AddFavourites} 
        />
      </div>
      <div className='row d-flex align-items-center mt-4 mb-4' >
        <MovieListHeading heading ='Favourites' />
      </div>
      <div className='row'>
        <MovieList 
          movies = {favourites} 
          handleFavouritesClick = {removeFavouriteMovie} 
          favouriteComponent = {RemoveFavourites} 
        />
      </div>
    </div>
  );
};

export default App;