Uncaught TypeError: addToMovieList is not a function

// MovieList.jsx
import "./movieList.scss";
import axios from "axios";
import { useEffect, useState } from "react";
import Card from "../card/Card";

function MovieList({ savedMovies, setSavedMovies }) {
  const [movieList, setMovieList] = useState(() => {
    const storedMovieList = JSON.parse(localStorage.getItem("movieList"));
    return storedMovieList || [];
  });

  useEffect(() => {
    if (!movieList.length) {
      fetchMovieList();
    }
  }, []); // Fetch movie list only on component mount if movieList is not available

  useEffect(() => {
    localStorage.setItem("movieList", JSON.stringify(movieList));
  }, [movieList]); // Update local storage whenever movieList changes

  const fetchMovieList = () => {
    axios
      .get(
        `https://api.themoviedb.org/3/discover/movie?api_key=${import.meta.env.VITE_API_KEY}`
      )
      .then((res) => {
        setMovieList(res.data.results);
      })
      .catch((err) => {
        console.log(err);
      });
  };


  const addToMovieList = (movieId) => {
    // Find the movie to add from savedMovies
    const movieToAdd = savedMovies.find(movie => movie.id === movieId);
    
    // Check if the movie to add exists
    if (movieToAdd) {
      // Update movieList state by adding the movie
      setMovieList(prevMovieList => [...prevMovieList, movieToAdd]);
    }
  };
  

  const removeFromMovieList = (movieId) => {
    setMovieList((prevMovieList) =>
      prevMovieList.filter((movie) => movie.id !== movieId)
    );
  };

  return (
    <div className="movieList">
      <Card
        movieList={movieList}
        savedMovies={savedMovies}
        setSavedMovies={setSavedMovies}
        removeFromMovieList={removeFromMovieList}
        addToMovieList={addToMovieList}
      />
    </div>
  );
}

export default MovieList;

// Card.jsx code
import { useState, useEffect } from "react";
import "./card.scss";

function Card({ movieList, savedMovies, setSavedMovies, source, removeFromMovieList, addToMovieList }) {
  const [saved, setSaved] = useState(null);
  
  const handleButtonClick = (movie) => {
    const isSaved = savedMovies.find((savedMovie) => savedMovie.id === movie.id);

    if (isSaved) {
      // If the movie is already saved, remove it
      const updatedSavedMovies = savedMovies.filter((savedMovie) => savedMovie.id !== movie.id);
      setSavedMovies(updatedSavedMovies);
      // Add the movie back to the movieList
      addToMovieList(movie.id); // Add the movie back to movieList
    } else {
      // If the movie is not saved, add it to savedMovies
      setSavedMovies((prevSavedMovies) => [...prevSavedMovies, movie]);
      // Remove the movie from the movieList
      removeFromMovieList(movie.id);
    }
    // Toggle the saved state of the movie
    setSaved((prevSaved) => (prevSaved === movie.id ? null : movie.id));
  };

  useEffect(() => {
    localStorage.setItem("savedMovies", JSON.stringify(savedMovies));
  }, [savedMovies]);

  return (
    <div className="cardContainer">
      {(source === "saved" ? savedMovies : movieList).map((movie) => (
        <div className="card" key={movie.id}>
          <div className="save">
            <button
              onClick={() => {
                handleButtonClick(movie);
              }}
              className={`button ${saved === movie.id ? "saved" : ""}`}
            >
              {saved === movie.id ? (
                <img src="/trash.png" alt="Remove from saved" />
              ) : (
                <img src="/star.png" alt="Add to saved" />
              )}
            </button>
          </div>
          <img
            src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`}
            alt=""
          />
          <p>{movie.title}</p>
        </div>
      ))}
    </div>
  );
}

export default Card;

Please help me with this. I want to have my button add the selected movie back to the original movieList local storage. My local storage has the original movie list to display on one tab, and a savedMovies array to display on a different tab. I’m trying to call the addToMovieList function in the card component to add the movie back to my original movie list array when I click on the button, however I’m getting the TypeError. How come my removeFromMovieList works fine but not addToMovieList?