export const Filters = ({ data, valueKey, name }: Props) => {
  const searchParams = useSearchParams();
  const router = useRouter();

  const selectedValue = searchParams.get(valueKey);
  const onClick = (slug: string | undefined) => {
    const currentPath = qs.parse(searchParams.toString());
    const query = {
      ...currentPath,
      [valueKey]: slug,
    };

    if (currentPath[valueKey] === slug) {
      query[valueKey] = null;
    }

    const url = qs.stringifyUrl(
      {
        url: window.location.href,
        query,
      },
      { skipNull: true }
    );
    router.push(url);
  };

I am building an app with this code as my filtering system, and it’s working fine, but I also have some pagination. I want to make it so that when I am on a page greater than 1 and whenever I change the filter, I want that change to send me back to the first page for a better user experience and not have empty results. I appreciate any help you can provide.