Как реализовать inifinite scroll с помощью RTK query

Пытаюсь реализвовать бесконечную прокрутку при помощи RTK query. Сейчас есть такой работающий код:

catApi.ts

import { Cat, QueryParams } from "@/app/types";
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

type Headers = {
  "x-api-key": string;
};

const Headers: Headers = {
  "x-api-key": privateConfig.VITE_CAT_API_KEY,
};

const generateQueryStr = (baseString: string, query: QueryParams): string => {
  const queryString: string =
    baseString +
    Object.entries(query)
      .map(([key, value]) => `${key}=${value}`)
      .join("&");

  return queryString;
};

export const catApi = createApi({
  reducerPath: "catApi",
  baseQuery: fetchBaseQuery({
    baseUrl: "https://api.thecatapi.com/v1/",
    prepareHeaders: (headers) => {
      headers.set("x-api-key", Headers["x-api-key"]);

      return headers;
    },
  }),

  endpoints: (builder) => ({
    getCats: builder.query<Cat[], QueryParams>({
      query: (queryParams: QueryParams) => {
        const queryStr = generateQueryStr("images/search?", queryParams);

        return { url: queryStr };
      },
      serializeQueryArgs: ({ endpointName }) => {
        return endpointName;
      },
      merge: (currentCache, newItems) => {
        currentCache.push(...newItems);
      },
      // Refetch when the page arg changes
      forceRefetch({ currentArg, previousArg }) {
        return currentArg !== previousArg;
      },
    }),
  }),
});

export const { useGetCatsQuery } = catApi;

useInfiniteScroll.ts

import { useGetCatsQuery } from "@/features/cats";
import { useEffect, useState } from "react";

export const useInfiniteScroll = () => {
  const [page, setPage] = useState(0);

  const { data, isLoading, isFetching } = useGetCatsQuery({
    limit: 20,
    page,
    order: "ASC",
  });
  useEffect(() => {
    const onScroll = () => {
      const scrolledToBottom =
        window.innerHeight + window.scrollY >= document.body.offsetHeight;
      if (scrolledToBottom && !isFetching) {
        setPage(page + 1);
      }
    };

    document.addEventListener("scroll", onScroll);

    return () => {
      document.removeEventListener("scroll", onScroll);
    };
  }, [page, isFetching]);

  return { data, isLoading, isFetching };
};

Но проблема заключается в том, что если перейти на другую страницу, а потом вернуться страницу с бесконечным скроллом, то данные запрашиваются еще раз и добавляются к уже закэшированным данным. Просиходит это потому, что переменная page каждый раз изменяется на 0 при переходе на страницу. Есть у кого идеи, как этого избежать?