How do I remove an item from localStorage and update the state once removed?

// **Card.jsx code**

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

function Card({ movieList, removeMovie }) {
  const [saved, setSaved] = useState(null);

  const handleButtonClick = (movie) => {
    setSaved(saved === movie ? null : movie);
    if (saved === movie) {
      setSavedMovies((prev) => prev.filter((item) => item !== movie));
      removeMovie(movie);
    } else {
      setSavedMovies((prev) => [...prev, movie]);
    }
  };

  const handleDelete = (movie) => {
    const filtered = movieList.filter((item) => {
      return item !== movie;
    });
    setSavedMovies(filtered);
  };

  const [savedMovies, setSavedMovies] = useState([]);

  useEffect(() => {
    const retrieveSavedMovies = () => {
      const savedMovies = localStorage.getItem("savedMovies");

      return savedMovies ? JSON.parse(savedMovies) : [];
    };

    setSavedMovies(retrieveSavedMovies());
  }, []);

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

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

export default Card;

// **SavedMovie.jsx code**

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

function SavedMovie() {
  const [savedMovies, setSavedMovies] = useState([]);

  useEffect(() => {
    const retrieveSavedMovies = () => {
      const savedMovies = localStorage.getItem("savedMovies");
      return savedMovies ? JSON.parse(savedMovies) : [];
    };

    setSavedMovies(retrieveSavedMovies());
  }, []);

  return (
    <div className="savedMovie">
      <div className="body">
        <div className="content">
          {savedMovies.length > 0 ? (
            <Card movieList={savedMovies} />
          ) : (
            <p>No saved movies</p>
          )}
        </div>
      </div>
    </div>
  );
}

export default SavedMovie;

Hello, I’m trying to create a movie list app with react. I have 2 tabs, the first one being “Movies” which is also the homepage, where I display a list of movies using TMDB API, and the second tab is “To Watch” where I display all the movies the user chose to save by clicking on the button. How do I remove the movie from the “To Watch” tabs when the user clicks on the same button?

I tried creating a removeMovie function and passing it to the Card component as props and then call it in the handleButtonClick function which is being called by the button onClick. However nothing actually happened.