in next 13 query params setting doesnt work

Question

import React, { FC, useState } from "react";
import Pagination from "@mui/material/Pagination";
import Stack from "@mui/material/Stack";
import { useSearchParams } from "next/navigation";

interface PaginationComponentProps<T> {
  data: T[];
}

const PaginationComponent: FC<PaginationComponentProps<{ name: string }>> = ({
  data,
}) => {
  const [page, setPage] = useState(1);
  const itemsPerPage = 10; // Number of items to show per page
  const pageCount = Math.ceil(data.length / itemsPerPage); // Calculate the total number of pages

  const searchParams = useSearchParams();
  const params = new URLSearchParams(searchParams);

  const paginateHandler = async (event: any, value: any) => {
    setPage(value);
    params.set("page", value);
  };

  return (
    <Stack spacing={2}>
      <Pagination count={pageCount} page={page} onChange={paginateHandler} />
    </Stack>
  );
};

export default PaginationComponent;

this would not add query with the page name to my route, it doesnt have effect even what i expect is localhist3000/brands?page=1 but **page=1 ** does not effect on the route