I have 3 buttons for 3 categories and they are 1.See all 2.Mobiles 3.Laptop and when each category is clicked it loads the list related to that and also I am trying to implement pagination. I am using React and Redux toolkit / RTK query.

Below is the use state and the query

const [currentPage, setCurrentPage] = useState(1);

const [category, setCategory] = useState('all');

  const {
    data ,
    isLoading,
    isFetching ,
    error
  } = useCategorySearchAPIQuery(
    {groupBy: selectedCategory, page: currentPage},
    {refetchOnMountOrArgChange: true},
  );

below is the builder query where groupBy is the selected category

  categorySearchAPI: builder.query({
      query: ({groupBy, page}) => ({
        url: `${CATEGORY_ENDPOINT}/all?group_by=${groupBy}&page=${page}`,
      }),
      transformResponse: (response, meta, arg) => {
        return response.data;
      },
      serializeQueryArgs: ({endpointName}) => {
        return endpointName;
      },
      // Always merge incoming data to the cache entry
      merge: (currentCache, newItems) => {
        currentCache.push(...newItems);
      },
      // Refetch when the page arg changes
      forceRefetch({currentArg, previousArg}) {
        return currentArg !== previousArg;
      },
    }),

The needed flow is when the category button is clicked it should show only the clicked category and when scrolled it should load the next page of that category. when category is changed reset the cache with new data.

currently when the category is changed – the data is not resetting and gets mingled (category gets mixed). I need reset on category change and increment the page when scrolled.

After searching for the solution found this code setup but cant make it work as expected. What is wrong here.