I am building a MERN app and I show a list of posts to the users, so I implemented infinite scrolling, but I noticed that if I delete the last post before the last post is completely in view, the infinite scroll won't run,

const [page, setPage] = useState(1);
  const observer = useRef();
  const query = useQuery();
  const t = !query.get("type") ? "images" : query.get("type");
  const postCallbackRef = useCallback(
    (node) => {
      if (loading) return;
      if (observer.current) observer.current.disconnect();
      observer.current = new IntersectionObserver(
        (entries) => {
          if (entries[0].isIntersecting && hasMore) {
            postsLoading();
            // console.log(entries[0].target);
            getInfinitePosts(t, "", page + 1);
            setPage(page + 1);
          }
        },
        {
          root: null,
          threshold: 0.5,
          rootMargin: "0px",
        }
      );
      if (node) observer.current.observe(node);
    },
    [loading, hasMore, getInfinitePosts, page, t, postsLoading]
  );
  useEffect(() => {
    setPage(1);
    getPosts(t);
  }, [t, getPosts, setPage]);
  const renderedPosts = posts.map((post, i) =>
    post === null
      ? null
      : (i + 1 === posts.length && (
          <section ref={postCallbackRef}>
            <Post key={post._id} t={t} post={post} />
          </section>
        )) || <Post key={post._id} t={t} post={post} />
  );

As you can see, I am only setting ref to the last post, so if that is deleted before loading the new posts no more posts would be loaded. getPosts is a function to get the posts based on the type of posts specified (images,blogs,vlogs) getInfinitePosts is the main load posts function. I am using redux. Usequery is a custom hook to let me know of the query from the URL. t is the type of post, it defaults to images. loading and hasMore are from the redux state.

To summarize infinite scroll is working fine but if I delete the last post before calling getInfinitePosts, getInfinitePosts is never called. One solution I can think of is, passing the getInfitePosts function, page number,setPage function, and isLast (boolean value whether element is last element or not) to the posts element as props and then do

if (isLast){
   <button class="delete-button" onclick={()=>{
            deletePost(post._id);
            getInfinitePosts(page+1);
            setPage(page+1);
            }}></button>
}

but it seems a little jenky so please suggest what I should do.