Reactjs – Dispatch posts again and again to my redux state

I am working on a project which have multiple routes like /profile /admin /home
I am fetching posts from backend using Redux Toolkit query in profile page and getting posts successfully but when I go to another page and come back to profile and dispatch again the posts in the states

import { Link, useLocation } from "react-router-dom";
import Tweets from "../components/Tweets";
import { FaEdit } from "react-icons/fa";
import { useGetUserDetailsQuery } from "../slices/userApiSlice";
import ProfileRightBar from "../components/ProfileRightBar";
import { toast } from "react-toastify";
import Spinner from "../components/Spinner";
import { useEffect, useState, useRef } from "react";
import { useGetUserPostsQuery } from "../slices/postApiSlice";
import { useDispatch, useSelector } from "react-redux";
import { updateUserPosts } from "../slices/postSlice";

const ProfileScreen = () => {
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);

  const lastPostRef = useRef();
  const location = useLocation();
  const dispatch = useDispatch();
  const username = location.pathname.split("/")[2];


  const { data: posts, isFetching } = useGetUserPostsQuery();

  const { userPosts } = useSelector((state) => state.posts);

  useEffect(() => {
    toast.error(error?.data?.message);
  }, [error]);

  useEffect(() => {
    if (posts) {
      if (posts.length === 0) {
        setHasMore(false);
      } else {
        dispatch(updateUserPosts(posts));
      }
    }
  }, [posts]);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting && !isFetching && hasMore) {
          // Fetch more posts when last post is intersecting
          setPage((prevPage) => prevPage + 1);
        }
      },
      { threshold: 1 }
    );

    if (lastPostRef.current) {
      observer.observe(lastPostRef.current);
    }

    // Cleanup the observer
    return () => observer.disconnect();
  }, [isFetching]);

  if (isLoading) {
    return <Spinner />;
  } else if (error) {
    return null;
  } else {
    return (
      <div className="w-full h-screen overflow-scroll">
        <div className="flex">
          <div className="border-r border-lightgray flex-[0.7]  h-screen overflow-auto">
            <Tweets posts={userPosts} />
            <div ref={lastPostRef}></div>
          </div>
        </div>
      </div>
    );
  }
};

export default ProfileScreen;

the main problem is when i come back to profile page it dispatch again the same posts in my array

the updateUserPost slice is here

const initialState = {
  posts: [],
  userPosts: [],
};

const postSlice = createSlice({
  name: "posts",
  initialState,
  reducers: {
    updateUserPosts: (state, action) => {
      state.userPosts.push(...action.payload);
    },
  },
});