UseInfiniteQuery, но все данные перерисовываются при каждом обновлении

Я пытаюсь разбить на страницы с помощью useInfiniteQuery в React Query, он отлично обновляет данные, но есть проблема, заключающаяся в том, что каждый раз, когда добавляются новые данные, страница перерисовывает весь список данных, включая существующие, и переходит к началу страницы, в то время как я хочу, чтобы он продолжал получать и отображать новые данные при прокрутке. Я делаю это как док, так что кто-нибудь может помочь?
Документы: 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.info("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>
  );
};