I use App router and Material UI for styling
I have this code of component:

"use client";

import PaginationItem from "@mui/material/PaginationItem";
import Link from "lib/link";
import { usePathname, useSearchParams } from "next/navigation";

export default function RenderPaginationItem(item) {
  const pathname = usePathname();
  const searchParams = useSearchParams()

  let queryString = ""

  let pricing = searchParams.get("pricing")

  if (pricing) {
    queryString = `pricing=${pricing}`;
  }

  return (
    <PaginationItem
      component={Link}
      href={`${pathname}${item.page === 1 ? `?${queryString}` : `?page=${item.page}&${queryString}`}`}
      {...item}
    />
  );
}

And use this component in my page.js like this:

...              )}
            </Box>
          </Paper>
        </Grid>
      ))}
      <Pagination
        page={parseInt(searchParams.page) || 1}
        count={dataProducts.total_pages}
        renderItem={RenderPaginationItem}
      />
    </Grid>
  );...

But it raises an error

Error: Rendered more hooks than during the previous render.

,

>  9 | const searchParams = useSearchParams()
     |                                    ^

without useSearchParams it works:

"use client";

import PaginationItem from "@mui/material/PaginationItem";
import Link from "lib/link";
import { usePathname} from "next/navigation";

export default function RenderPaginationItem(item) {
  const pathname = usePathname();

  return (
    <PaginationItem
      component={Link}
 
      href={`${pathname}${item.page === 1 ? "" : `?page=${item.page}`}`}

      {...item}
    />
  );
}

Can you help me to handle this issue? I just want to use other query parameters (fo filtering) in my url along with pagination