Changing URL in React.js re-renders the whole page

I’m building a React application that includes a table with filterable data, using tanstack/react-query to fetch the data. I need to be able to update the URL search parameters with the filtered data so that users can share the filtered results with others. However, whenever I update the URL search params with the filtered data, react re-renders the entire page, instead of just updating the table with the filtered data.

Here is a snippet of how i fetch the data inside the table:

  import { searchParams, setSearchParams } from "react-router-dom";

  const [searchParams] = useSearchParams();
  
  const { data } = useQuery(
    ...getDataQuery({ queryParams: searchParams.toString() }),
  );

So whenever i add a filter (inside a child component) i do:

import { searchParams, setSearchParams } from "react-router-dom";

const [searchParams, setSearchParams] = useSearchParams();

searchParams.set("field", "value");
setSearchParams(searchParams.toString());

Any suggestions on how to update the URL search params with the filtered data without triggering a full re-render of the page? Thanks in advance for your help.