There is a task to display a list of cards that need to be displayed with inifinite scroll and load data in portions, also there are filters with checkboxes, active filters I store an array of strings in the store, when the query is executed parameters of the page and filters are passed. I am struggling with the correct api configuration. If you don’t change parameters, everything works correctly and everything is ok, but when you start clicking checkboxes and changing filters you start to have problems. I have already played with the cache as I could and with serialisation of parameters but I can not solve the problem.
Help I am new to Redux.

This is ui component

export const ChooseProject = () => {
   const [page, setPage] = useState(1);
   const activeFilters = useStateSelector(s => s.filterProjectsReducer.activeProjectFilters);
   const { isLoading, data, error, isError, isFetching } = useGetProjectsQuery({
      page,
      filters: activeFilters,
   });

   const { data: total } = useGetProjectsLengthQuery({ filters: activeFilters });
   // const [fetchMore] = useLazyGetProjectsQuery();
   return (
      <Container sx={{ mt: 4 }}>
         <HeaderAction title="ОБЕРИ СВІЙ ПРОЕКТ" />
         <Box sx={{ my: 4 }}>
            <FeatureSortProjectButton />
            <Grid container spacing={6} mt={4}>
               <Grid id="projects" sx={{ maxWidth: "1200px" }} size="grow">
                  {isLoading ? (
                     <div>Load content....</div>
                  ) : (
                     <InfiniteScroll
                        dataLength={data ? data?.length : 0}
                        next={() => {
                           setPage(prev => prev + 1);
                        }}
                        hasMore={(data?.length as number) < total!}
                        loader={null}
                        endMessage={!isError && <p>There are no projects anymore</p>}
                     >
                        <SpaceColumnBetweenStack spacing={6}>
                           {data?.map(
                              ({
                                 id,
                                 complexity,
                                 description,
                                 network_project_type,
                                 project_image,
                                 project_type,
                                 skills_expertise,
                                 title,
                              }) => (
                                 <CardProject
                                    id={id}
                                    key={id}
                                    complexity={complexity}
                                    description={description}
                                    network_project_type={network_project_type}
                                    project_image={project_image}
                                    project_type={project_type}
                                    skills_expertise={skills_expertise}
                                    title={title}
                                 />
                              ),
                           )}
                           {isFetching && <p style={{ textAlign: "center" }}>Load more.....</p>}
                           {isError && <span>{error.data.toString()}</span>}
                        </SpaceColumnBetweenStack>
                     </InfiniteScroll>
                  )}
               </Grid>
               <Grid size={3}>
                  <FilterChooseProjects />
               </Grid>
            </Grid>
         </Box>
      </Container>
   );
};

This is api

import { baseApi } from "@/shared/redux/baseApi";
import { IProjectCard } from "@/entities/ProjectCard/ui/CardProject";

export const LIMIT_OF_DATA_PROJECTS = 5;

export const projectsApi = baseApi.injectEndpoints({
   endpoints: builder => ({
      getProjects: builder.query<
         IProjectCard[],
         { page?: number; limit?: number; filters?: string[] }
      >({
         query: ({ limit = LIMIT_OF_DATA_PROJECTS, page = 1, filters }) => ({
            url: "/projects",
            method: "GET",
            params: {
               page,
               limit,
               filter: filters?.join("|"),
            },
         }),
         serializeQueryArgs: ({ queryArgs }) => {
            const { filters, page } = queryArgs;
            return {filters}
            //return { page, filters };
         },
         merge: (currentCacheData, responseData) => {
            const mergedData = [...currentCacheData];
            responseData.forEach(project => {
               const existingProjectIndex = mergedData.findIndex(p => p.id === project.id);
               if (existingProjectIndex !== -1) {
                  mergedData[existingProjectIndex] = project;
               } else {
                  mergedData.push(project);
               }
            });
            return mergedData;
            // return [...currentCacheData, ...responseData];
         },
         
         providesTags: [{ type: "Projects", id: "all" }],
         forceRefetch: ({ currentArg, previousArg }) => currentArg !== previousArg,
      }),
      
      getProjectsLength: builder.query<number, { filters?: string[] }>({
         query: ({ filters }) => ({
            url: "/projects",
            params: {
               filter: filters?.join("|"),
            },
         }),

         transformResponse: (responseData: IProjectCard[]) => {
            return responseData.length;
         },
      }),
   }),
   
});

export const { useGetProjectsQuery, useGetProjectsLengthQuery, useLazyGetProjectsQuery } =
   projectsApi;

I tried changing serializeQueryArgs ,
I also tried to play with the merge function in different ways, I’ve been sitting here for a few days and I don’t know what to do(