[Bug]: `setSearchParams` do not provide the latest queryString passed as argument to `navigate` about react-router HOT 3 CLOSED

function About() {
  const [searchParams] = useSearchParams();
  // get display state from search params
  const display = searchParams.get('display') === 'on';
  const navigate = useNavigate();
  const showGenericComponent = useCallback(() => {
    navigate({ search: '?display=on' });
  }, [navigate]);

  const hideGenericComponent = useCallback(() => {
    navigate({ search: '' });
  }, []);

  return (
    <>
      <button onClick={display ? hideGenericComponent : showGenericComponent}>
        {display ? 'Hide' : 'Show'} GenericComponent
      </button>
      {display && <GenericComponent />}
    </>
  );
}
const GenericComponent = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const location = useLocation();
  // get current pageSize
  function getPageSize(s: string) {
    let pageSize = parseInt(s);
    if (!pageSize || Number.isNaN(pageSize) || pageSize > 1000) {
      pageSize = 50;
    }
    return pageSize;
  }
  const pageSize = getPageSize(searchParams.get('pageSize') ?? '');
  let data = {
    location: `${location.pathname}${location.search}`,
    params: {
      display: searchParams.get('display'),
      pageSize,
    },
  };

  return (
    <div>
      <h3>Generic Component</h3>
      <pre>{JSON.stringify(data, null, 2)}</pre>
      <b>Links with new search params</b>
      <ul>
        <li>
          <Link to={getSearchParams(searchParams, { pageSize: 100 })}>
            ?pageSize=100
          </Link>
        </li>
        <li>
          <Link to={getSearchParams(searchParams, { pageSize: 500 })}>
            ?pageSize=500
          </Link>
        </li>
        <li>
          <Link to={getSearchParams(searchParams, { pageSize: 1500 })}>
            ?pageSize=1500
          </Link>
        </li>
      </ul>
      <b>
        Update via <code>setSearchParams</code>
      </b>
      <ul>
        <li>
          <button
            onClick={() => {
              // modify existing search params
              searchParams.set('pageSize', '250');
              // update route with modified search params (which triggers a navigation/re-render)
              setSearchParams(searchParams);
            }}
          >
            <code>searchParams.set('pageSize', '250')</code>
          </button>
        </li>
      </ul>
    </div>
  );
};

/**
 * function to return querystring
 * from existing search params with updated values
 */
function getSearchParams(
  searchParams: URLSearchParams,
  newValues: Record<string, unknown>
) {
  const newSearchParams = new URLSearchParams(searchParams);
  Object.entries(newValues).forEach(([key, value]) =>
    newSearchParams.set(key, String(value))
  );
  return newSearchParams.size ? `?${newSearchParams}` : '';
}

const [age, setAge] = useState(42);
function handleClick() {
  setAge(a => a + 1); // setAge(42 => 43)
  setAge(a => a + 1); // setAge(43 => 44)
  setAge(a => a + 1); // setAge(44 => 45)
}

const [searchParams, setSearchParams] = useSearchParams();
function handleClick() {
  setSearchParams((prev) => {
    console.log(prev.toString()); // '' (empty string)
    const next = new URLSearchParams(prev);
    next.set('key1', 'value1');
    return next;
  });
  setSearchParams((prev) => {
    console.log(prev.toString()); // '' (empty string)
    const next = new URLSearchParams(prev);
    next.set('key2', 'value2');
    return next;
  });
  setSearchParams((prev) => {
    console.log(prev.toString()); // '' (empty string)
    const next = new URLSearchParams(prev);
    next.set('key3', 'value3');
    return next;
  });
 // after the render, searchParams.toString() will be 'key3=value3'
}