React Localstorage values resetting after refresh

Question

when i add new items to favorites localStorage, all my items in favorites storage resetting and new added items saving in the localStorage. if i dont add any new item it works fine.

how can i stop the reset? im probably doing something wrong with setFavorite state but i don't know.

App.js

import "./App.css";
import React, { Profiler, useState, useEffect } from "react";

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Login from "./components/Login/Login";
import SignUp from "./components/SignUp/SignUp";
import Home from "./components/Home/Home";
import ChuckNorris from "./components/ListAPI/ChuckNorris/ChuckNorris";
import CreatePost from "./components/CreatePost/CreatePost";
import RandomUser from "./components/ListAPI/RandomUser/RandomUser";
import Pokemon from "./components/ListAPI/Pokemon/Pokemon";
import Valorant from "./components/ListAPI/Valorant/Valorant";
import Recipes from "./components/ListAPI/Recipes/Recipes";
import { MainContext } from "./components/Context";
import { getDocs, collection, deleteDoc, doc } from "firebase/firestore";
import { db, auth } from "./firebase";
import Favorites from "./components/Favorites/Favorites";

function App() {
  const [isAuth, setIsAuth] = useState(localStorage.getItem("isAuth"));
  const [modu, setModu] = useState(false);
  const [postLists, setPostList] = useState([]);
  const [favorites, setFavorites] = useState(localStorage.getItem("dam"));

  const postsCollectionRef = collection(db, "posts");

  useEffect(() => {
    const getPosts = async () => {
      const data = await getDocs(postsCollectionRef);
      setPostList(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
    };

    getPosts();
  }, []);

  useEffect(() => {
    const localData = localStorage.getItem("dam") ?? [];
    setFavorites(localData);
  }, [setFavorites]);

  const addFavorite = (favorite) => {
    setFavorites([...favorites, favorite]);

    localStorage.setItem("dam", JSON.stringify(favorite));
  };

  const data = {
    postLists,
    setPostList,
    favorites,
    setFavorites,
    addFavorite,
  };
  return (
    <>
      <MainContext.Provider value={data}>
        <Router>
          <Routes>
            <Route
              exact
              path="/"
              element={<Home isAuth={isAuth} setIsAuth={setIsAuth} />}
            />
            <Route
              path="/login"
              element={<Login isAuth={isAuth} setIsAuth={setIsAuth} />}
            />
            <Route
              path="/createpost"
              element={<CreatePost isAuth={isAuth} setIsAuth={setIsAuth} />}
            />
            <Route
              path="/signup"
              element={<SignUp isAuth={isAuth} setIsAuth={setIsAuth} />}
            />
            <Route
              path="/chucknorris"
              element={<ChuckNorris isAuth={isAuth} setIsAuth={setIsAuth} />}
            />
            <Route
              path="/pokemon"
              element={<Pokemon isAuth={isAuth} setIsAuth={setIsAuth} />}
            />
            <Route
              path="/randomuser"
              element={<RandomUser isAuth={isAuth} setIsAuth={setIsAuth} />}
            />
            <Route
              path="/valorant"
              element={<Valorant isAuth={isAuth} setIsAuth={setIsAuth} />}
            />
            <Route
              path="/recipes"
              element={<Recipes isAuth={isAuth} setIsAuth={setIsAuth} />}
            />
            <Route
              path="/favorites"
              element={<Favorites isAuth={isAuth} setIsAuth={setIsAuth} />}
            />
          </Routes>
        </Router>
      </MainContext.Provider>
    </>
  );
}

export default App;

Favorites.js

import React, { useEffect, useState } from "react";
import Sidebar from "../Sidebar/Sidebar";
import PostList from "../Home/PostList";
import { useContext, MainContext } from "../Context";
import "./Favorites.css";

const Favorites = ({ isAuth, setIsAuth, addFavorite }) => {
  const { postLists, setPostList, favorites, setFavorites } =
    useContext(MainContext);

  return (
    <>
      {" "}
      <div className="containers">
        <div className="sidebar">
          <Sidebar isAuth={isAuth} setIsAuth={setIsAuth} />

          <div className="norris mt-4">
            <div className="favorite-container">
              <div className="new-container">
                {postLists
                  .filter((post) => favorites.includes(post))
                  .map((post) => (
                    <PostList
                      post={post}
                      addFavorite={addFavorite}
                      key={post.id}
                    />
                  ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Favorites;

Postlist.js

import React from "react";

const PostList = ({ post, addFavorite }) => {
  const { linkin, title, imageURL, photoURL, name, id } = post;

  return (
    <>
      <div>
        <div className="post">
          <div className="postimage">
            <div className="del"></div>

            <div className="images">
              <a href={linkin}>
                <p className="ss">{title}</p>

                <img src={imageURL} id="img-photo" />
              </a>
              <div className="uploader">
                <img src={photoURL} />

                <p>by {name}</p>
              </div>
              {addFavorite && (
                <div className="butons">
                  <button onClick={() => addFavorite(id)} id="favori">
                    +
                  </button>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default PostList;

Answer 1

Your addFavorite function saves favorite to local storage instead of saving it the same way you set your local state [...favorites, favorite]

const addFavorite = (favorite) => {
  setFavorites([...favorites, favorite]);

  localStorage.setItem("dam", JSON.stringify(favorite)); <- this also needs to be [...favorites, favorite] 
};