Toggle icon with error in reactjs. How to solve?

Question

By clicking on the heart icon I want to change the color to red and add it to the favorite. When clicking again, it goes back to gray and remove from favorite. But when I click on an icon they all change color. How to fix to change only the icon that was clicked?

const Destaques = () => {
  const { destaques, favoriteList, setFavoriteList, isFavorite, setIsFavorite, handlerIcon } = useContext(MoviesContext);
  const [showStatus, setShowStatus] = useState(false);
  const handleShow = () => setShowStatus(true);
  const handleClose = () => setShowStatus(false);
  var settings = {
    infinite: false,
    autoplay: true,
    speed: 500,
    slidesToShow: 4,
    infinite: true,
    slidesToScroll: 1,
    initialSlide: 0,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 1,
          infinite: true,
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 1,
          initialSlide: 2
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  };

  const filteredHighlight = destaques.filter(movie => movie.highlight === true);

  const sliders = () => {
    return filteredHighlight.map((data) => {
      return (
        <div>
          <div className='container-card' key={data.id}>
            <div className='card-img'>
              <img alt={data.title} src={data.poster} onClick={handleShow} />
              <i onClick={handlerIcon}>
                {isFavorite ?
                  <FaHeart className='heartIcon' style={{ color: 'red' }} /> : <FaHeart className='heartIcon' style={{ color: '#BABABA' }} />
                }
              </i>
            </div>
            <div className='box-content'>
              <div className='box-title-vote'>
                <h4 className='card-title'>
                  {data.title}
                </h4>
                <div className='box-vote-like'>
                  <span className='card-vote-average'>4/5</span>
                  <i className='icon-like-destaques'>
                    <img src={IconLike} alt="icon like"></img>
                  </i>
                </div>
              </div>
              <p className='card-overview'>
                {data.overview}
              </p>
            </div>
          </div>
        
            <Modal show={showStatus} onHide={handleClose} backdrop="static" centered >
              <Modal.Header closeButton>
              </Modal.Header>
              <Modal.Body >
                <DefaultDetail id={data.id} poster={data.poster} overview={data.overview} title={data.title} />
              </Modal.Body>
            </Modal>
    
        </div>
      );
    });
  }

  return (
    <div>
      <h3 className='title-destaque'>Destaques</h3>
      <Slider {...settings}>
        {sliders()}
      </Slider>
    </div>
  );
}
export default Destaques

Before clicking the icon After clicking the icon

Code to add, remove and toggle icon favorite.

const MoviesContextProvider = props => {
    const results = dataAllMovies.movies;
    const [destaques, setDestaques] = useState(results);
    const [allMovies, setAllMovies] = useState(results);
    const [isFavorite, setIsFavorite] = useState(false);
    const [favoriteList, setFavoriteList] = useState([]);

    //favorite
    const getMovieStorage = () => {
        if (localStorage.getItem("favorites")) {
            let favoriteList = JSON.parse(localStorage.getItem("favorites"));
            return favoriteList
        }
        else {
            let favoriteList = []
            return favoriteList
        }
    }

    useEffect(() => {
        if (favoriteList.includes(allMovies.id)) {
            setIsFavorite(!isFavorite);
            const favorite = getMovieStorage();
            setFavoriteList(favorite);
        }
    }, []);
    const handlerIcon = (e) => {
        setIsFavorite(!isFavorite);
        if (isFavorite) {
            var index = favoriteList.indexOf(allMovies.id);
            favoriteList.splice(index, 1);
            setFavoriteList(favoriteList);
            deleteMovie(allMovies.id);
        }
        else {
            setFavoriteList(favoriteList.concat([allMovies.id]));
            addMovie(allMovies.id);
        }
    }
    const deleteMovie = (id) => {
        const Favorite = getMovieStorage();
        var index = Favorite.indexOf(id)
        Favorite.splice(index, 1);
        localStorage.setItem("FavoritList", JSON.stringify(Favorite));
    }
    const addMovie = (id) => {
        const Favorite = getMovieStorage();
        Favorite.push(id)
        localStorage.setItem("FavoritList", JSON.stringify(Favorite))
    }
return (
        <MoviesContext.Provider value={{ allMovies, destaques, filterMovies, filteredMovies, isFavorite, setIsFavorite, addFavoriteMovie, removeFavoriteMovie, handleFavClick, handlerIcon, favoriteList, getMovieStorage }}>
            {props.children}
        </MoviesContext.Provider>
    );
}

export default MoviesContextProvider

PLEASE HELP ME. I NEED TO SOLVE THIS PROBLEM.

Answer 1

You must have an array of movies ids and check it with each movie id, now you check isFavorite, is not true

change isFavorite condition to => favoriteList.includes(data.id)

and fill favoriteList with movies ids in your context

           <div className='card-img'>
              <img alt={data.title} src={data.poster} onClick={handleShow} />
              <i onClick={handlerIcon}>
                {favoriteList.includes(data.id) ?
                  <FaHeart className='heartIcon' style={{ color: 'red' }} /> : <FaHeart className='heartIcon' style={{ color: '#BABABA' }} />
                }
              </i>
           </div>