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  );