How to use useSearchParams hooks in next js 13

"use client";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import React, { useEffect, useState } from "react";

const checkList = ["Apple", "Banana", "Tea", "Coffee"];

interface MyFilterProps {
  brands: any;
}
const MyFilter = ({ brands }: MyFilterProps) => {
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const router = useRouter();
  const [checkedItems, setCheckedItems] = useState<any>([]);
  const [catsItems, setCatsItems] = useState<any>([]);

  function handleBrandChage(e: any) {
    const { value, checked } = e.target;
    let isSelected = checked;
    if (isSelected) {
      setCheckedItems([...checkedItems, value]);
    } else {
      setCheckedItems((preItems: any) => {
        return preItems?.filter((val: any) => {
          return val !== value;
        });
      });
    }
  }

  function handleCatsChage(e: any) {
    const { value, checked } = e.target;
    const val = parseInt(value);

    let isSelected = checked;
    if (isSelected) {
      setCatsItems([...catsItems, val]);
    } else {
      setCatsItems((preItems: any) => {
        return preItems?.filter((val: any) => {
          return val !== val;
        });
      });
    }
  }

  const params = new URLSearchParams(searchParams);
  useEffect(() => {
    if (!checkedItems || !catsItems) {
      params.set("", "");
      return;
    }
    if (checkedItems) {
      params.set("brand", checkedItems);
      router.push(`${pathname}?${params}`);
    } else {
      params.delete("brand", "");
    }
  }, [checkedItems]);

  console.log("checkedItems=>", { checkedItems, catsItems });

  useEffect(() => {
    if (catsItems) {
      params.set("cats", catsItems);
      router.push(`${pathname}?${params}`);
    } else {
      params.delete("cats", "");
    }
  }, [catsItems]);

  return (
    <>
      <h1>Brand Filter</h1>
      {checkList &&
        checkList?.map((b: any, i: number) => (
          <>
            <input
              key={b}
              type="checkbox"
              checked={checkedItems?.includes(b)}
              value={b}
              onChange={handleBrandChage}
              name="brand-checkbox"
            />
            <label>{b}</label>
            <br />
          </>
        ))}
      <div className="result">
        Above checkbox is {checkedItems && checkedItems.join(", ")}.
      </div>

      <h1>Cats Filter</h1>
      {brands &&
        brands?.map((b: any) => (
          <>
            <input
              key={b.id}
              type="checkbox"
              checked={catsItems?.includes(b.id)}
              value={b.id}
              onChange={handleCatsChage}
              name="brand-checkbox"
            />
            <label>:::::{b.brand}</label>
            <br />
          </>
        ))}
      <div className="result">
        Above checkbox is {catsItems && catsItems.join(", ")}.
      </div>
    </>
  );
};

export default MyFilter;