Removing and displaying Item dynamically from localstorage

I am new to React.js and working on a project finds deals for games, this is my wishlistdata component, my issue is that whenever I delete item from wishlist it gets removed from localstorage but the card doesnt disappear until the page is reloaded, also help me if my code is unclean. Thanks in advance.
Here is my code :

import Wishlist from "./Wishlist";
import "./Wishlist.css";
import "animate.css";
import axios from "axios";

const WishlistData = () => {
  const [gamedet, setGameDet] = useState([]);
  const [loaded, setLoaded] = useState(false);
  const [stores, setStores] = useState([]);
  const [price, setPrice] = useState([]);
  const [wishlist, setWishlist] = useState([]);

  useEffect(() => {
    setWishlist(localStorage.getItem("Wishlist") ? JSON.parse(localStorage.getItem("Wishlist")):[])
    },[setWishlist])

  const RemoveFromWishlist = (id) => {
     let newList = wishlist.filter((game) => game.gameID !== id);
    setWishlist(localStorage.setItem("Wishlist", JSON.stringify(newList)));
    localStorage.setItem("Wishlist", JSON.stringify(newList));
    console.log("id", wishlist);
    console.log("newlist", wishlist);
  };
  const DET_URL = `https://api.rawg.io/api/games`;
  useEffect(() => {
    let isCancelled = false;
    const RAWGdet = () => {
      wishlist && wishlist.map((game, index) => {
        return axios({
          url: `https://cors-anywhere.herokuapp.com/${DET_URL}/${game.gameID}?key=${process.env.REACT_APP_RAWG_KEY}`,
          headers: {
            "X-Requested-With": "XMLHttpRequest",
          },
          method: "GET",
        }).then((res) => {
          if (!isCancelled) {
            setGameDet((gamedet) => gamedet.concat(res.data));
          }
          setLoaded(true);
        });
      });
    };
    RAWGdet();
    return () => {
      isCancelled = true;
    };
  }, [DET_URL, wishlist]);

  console.log("wish", wishlist);
  useEffect(() => {
    let isCancelled = false;
    const CSPrice = () => {
      wishlist && wishlist.map((game, index) => {
        return axios({
          url: `https://cors-anywhere.herokuapp.com/${DET_URL}/${game.slug}/stores?key=${process.env.REACT_APP_RAWG_KEY}`,
          headers: {
            "X-Requested-With": "XMLHttpRequest",
          },
          method: "GET",
        }).then((res) => {
          if (!isCancelled) {
            setStores((stores) => stores.concat(res.data));
          }
          setLoaded(true);
        });
      });
    };
    CSPrice();
    return () => {
      isCancelled = true;
    };
  }, [DET_URL, wishlist]);

  let stm = [];

  stores
    .map((steam) => {
      return steam.results;
    })
    .filter((item) => {
      return item.map((id) => {
        return id.store_id === 1 ? stm.push(id.url) : <>{null}</>;
      });
    });
  // console.log("in", stm);
  let idmain = [];
  stm.map((steamid) => {
    return steamid.split("/").map((item) => {
      return idmain.push(item);
    });
  });

  useEffect(() => {
    return (
      <>
        { wishlist && wishlist.map((game, index) => {
          return (
            <div key={index}>
              {axios
                .get(
                  `https://www.cheapshark.com/api/1.0/deals?storeID=1,7,8,11,13,25&steamAppID=${game.steamID}`
                )
                .then((res) => {
                  setPrice((price) => price.concat(res.data));
                }, setLoaded(true))
                .catch((err) => {
                  console.log("ERR", err);
                })}
            </div>
          );
        })}
      </>
    );
  }, [wishlist]);
let tempArr1 = []
let temparr2= []

// console.log("gam2", tempArr2);

  if (loaded) {
    return (
      <div className="animate__animated animate__slideInDown">
        <div className="wishlist_header">
          <h3>Your Wishlist</h3>
        </div>
        {wishlist.length !== 0 ? (
          price.map((game1) => {
            let temp = {
              "steamAppID" : game1.steamAppID,
              "storeID" : game1.storeID,
              "normalPrice" : game1.normalPrice,
              "salePrice" : game1.salePrice
            };
            return tempArr1.push(temp) && tempArr2.push(temp.steamAppID);
          }) &&
          gamedet.map((game, index) => {
            // console.log("mad2", game.name);
            return (
              <div id="wishlist_ctn" key={index}>
                <Wishlist
                  key={index}
                  title={game.name}
                  steamRatingCount={game.id}
                  // steamRatingPercent={game[0].steamRatingPercent}
                  // savings={game[0].savings}
                  // normalPrice={}
                  // salePrice={salePrice}
                  steamAppID = {gamble2}
                  data={gamble}
                  image={game.background_image}
                  rem={() => RemoveFromWishlist(game.id)}
                />
              </div>
            );
          })
        ) : (
          <div className="wishlist_header">
            <h3>Add Games!!</h3>
          </div>
        )}
      </div>
    );
  } else {
    return (
      <div className="hmm">
        <div className="wishlist_header">
          <h3>Your Wishlist</h3>
        </div>
        <div className="wishlist_header">
          <h3>Loading Games</h3>
        </div>
        );
      </div>
    );
  }
};

export default WishlistData;