message: Use `useSearchParams` in `useQueryParamState`
diff: import { isEqual } from 'lodash';
  import qs from 'qs';
  import { useEffect, useState } from 'react';
  -import { useLocation } from 'react-router-dom';
  +import { useSearchParams } from 'react-router-dom';
  import { useDebounce } from 'react-use';
  function stringify(queryParams: any): string {
  @@ -59,39 +59,34 @@ type SetQueryParams<T> = (params: T) => void;
  export function useQueryParamState<T>(
  stateName: string,
  ): [T | undefined, SetQueryParams<T>] {
  - const location = useLocation();
  + const [searchParams, setSearchParams] = useSearchParams();
  + const searchParamsString = searchParams.toString();
  const [queryParamState, setQueryParamState] = useState<T>(
  - extractState(location.search, stateName),
  + extractState(searchParamsString, stateName),
  );
  useEffect(() => {
  - const newState = extractState(location.search, stateName);
  + const newState = extractState(searchParamsString, stateName);
  setQueryParamState(oldState =>
  isEqual(newState, oldState) ? oldState : newState,
  );
  - }, [location, stateName]);
  + }, [searchParamsString, setQueryParamState, stateName]);
  useDebounce(
  () => {
  const queryString = joinQueryString(
  - location.search,
  + searchParamsString,
  stateName,
  queryParamState,
  );
  - if (location.search !== queryString) {
  - // We fallback to the history API, as navigate from react-router causes
  - // input elements to loose focus.
  - history.replaceState(
  - undefined,
  - document.title,
  - `${location.pathname}?${queryString}`,
  - );
  + if (searchParamsString !== queryString) {
  + setSearchParams(queryString, { replace: true });
  }
  },
  100,
  - [queryParamState],
  + [setSearchParams, queryParamState, searchParamsString, stateName],
  );
  return [queryParamState, setQueryParamState];
  