useInfiniteQuery but all the data re-rendered every refetch

Question

I'm trying pagination by useInfiniteQuery in React Query, it's refetch data perfectly, but there's a problem that each time new data added, the page re-render all the data list, include existed ones, and it's jump to head of the page, while I want that it's keep fetch and render new data on scroll. I make it as the doc, so can anyone help?
Docs: https://react-query.tanstack.com/examples/load-more-infinite-scroll

  const { ref, inView } = useInView();

  const { status, data, isFetching, isFetchingNextPage, fetchNextPage } =
    useInfiniteQuery(["videos", endpoint], getVideo, {
      getNextPageParam: () => 5,
    });

  useEffect(() => {
    if (inView) {
      console.log("Loaded more");
      fetchNextPage();
    }
  }, [inView]);

  return (
    <div className="recommended_videos">
      <h2>Recommended Videos</h2>

      {status === "loading" || isFetching ? (
        <Loader />
      ) : status === "error" ? (
        <div>Error</div>
      ) : (
        <div className="recommended_videos_videos">
          {data?.pages.map((page) =>
            page.data?.items?.map?.((video) => (
              <VideoCard
                video={video}
                id={(video.id.videoId && video.id.videoId) || video.id}
                key={(video.id.videoId && video.id.videoId) || video.id}
              />
            ))
          )}
        </div>
      )}
      <div ref={ref}>
          {isFetchingNextPage ? <Loader /> : null}
      </div>
    </div>
  );
};

Answer 1

I found that the problem is here

status === "loading" || isFetching ? (<Loader />)

Because each time refetch, isFetching always turn to true, so all the component must be re-rendered.
Actually I removed all this condition, because under data list I used another
By the way, many thanks for suggestions.