realiza la lógica y dame el código completo para un boton que agregue el item o currentItem a favoritos median localStorage, que al recargar no se eliminen los datos, y que el boton sirva como toggle, si un elemento ya está en el arrayFav, que se elimine si no, que se agregue, solo cuando el usuario de clic, por favor, te dejo mi código:

import React, { useEffect, useState } from "react";
import { BASE_URL } from "../data/consts";
import { MdExplicit } from "react-icons/md";
import { IoBookmarkOutline, IoHeartOutline } from "react-icons/io5";


export const FetchData = ({endPoint}) => {
  
  const urlApi = BASE_URL + endPoint;
  
  const [data, setData] = useState([]);

  const [loading, setLoading] = useState(false);

  const [currentItem, setCurrentItem] = useState([]);

  const [aniflowFav, setAniflowFav] = useState([]);  
  
  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(urlApi);
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setLoading(false)
      }
    };

    fetchData();
  }, [endPoint]);

  useEffect(() => {
    try {
      const isLocalStorage = JSON.parse(localStorage.getItem('aniflowFav'));
      console.log(isLocalStorage)
      if (isLocalStorage !== null) {
        setAniflowFav(isLocalStorage);
      }
    } catch (error) {
      console.error('Error parsing LocalStorage data:', error);
    }
  }, []);

  useEffect(() => {
    const isLocalStorage = JSON.parse(localStorage.getItem('aniflowFav'));
    if (isLocalStorage && currentItem) {
      // Actualizar los datos existentes en localStorage con el nuevo valor de currentItem
      localStorage.setItem('aniflowFav', JSON.stringify([...isLocalStorage, currentItem]));
    }
  }, [currentItem]);
  
  const handleCurrentItem = (e, item) => {
    e.preventDefault();
    setCurrentItem(item);
  };

  return (
    <>
    {
      loading && 
      //create an array with 5 
      Array.from({ length: 10 }, (_, i) => (
        <div className="w-40 h-56 bg-zinc-900 animate-pulse flex-shrink-0" key={i}/>
      ))
    }
      {!loading && data &&
        data?.results?.map((item, i) => {
          return (
            <a
              key={i}
              href={`${
                item?.episodeId
                  ? `/watch/${item?.episodeId}`
                  : `/anime/${item?.id}`
              }`}
              className="overflow-hidden flex-shrink-0 snap-start w-40 relative z-10"
              data-anime={JSON.stringify(item)}
            >
              <img
                loading="lazy"
                className="w-40 h-56 object-cover transition relative"
                src={item?.image}
                alt={`${item?.title} Cover Image`}
              />
              <div className="absolute inset-0 p-2 bg-gradient-to-t from-zinc-900 via-transparent to-zinc-900 flex flex-col justify-between">
                <div
                  className={`relative z-40 text-sm flex items-center ${
                    item?.nsfw ? "justify-between" : "justify-end"
                  }`}
                >
                  {item?.nsfw && (
                    <>
                      <MdExplicit size={20} />
                      <span className="font-medium"></span>
                    </>
                  )}
                  <div className="flex items-center gap-2">
                    <button onClick={(e) => handleCurrentItem(e, item)}>
                      <IoHeartOutline size={18} />
                    </button>
                    <button onClick={(e) => handleCurrentItem(e, item)}>
                      <IoBookmarkOutline size={18} />
                    </button>
                  </div>
                </div>
                <h3 className="font-medium mt-2 text-sm line-clamp-2">
                  {item?.title}
                </h3>
              </div>
            </a>
          );
        })}
    </>
  );
};