How to make a custom Debounce hook in react js

import { useEffect } from "react";

export const useDebouncedEffect = (effect: any, deps: any[], delay: number) => {
  useEffect(() => {
    const handler = setTimeout(() => effect(), delay);

    return () => clearTimeout(handler);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [...(deps || []), delay]);
};

import { useDebouncedEffect } from "./useDebouncedEffect";

 // debounce search onchange
  // eslint-disable-next-line react-hooks/exhaustive-deps
  useDebouncedEffect(
    () => {
// function which will be running on effect, in our case when something changes in search box.
       changeSearchState();
    },
// this is the dependency, if it changes it will trigger the debounce again
    [search],
// time to wait before effect runs
    debounceTimeInMilliseconds
  );