I have a custom hook for listening to outside click:

import { useEffect, useRef, MutableRefObject } from 'react'

function useOnClickOutside(ref: MutableRefObject<HTMLElement | undefined>, handler: (ev: MouseEvent | TouchEvent) => void) {
  useEffect(
    () => {
      const listener = (event: MouseEvent | TouchEvent) => {
        // Do nothing if clicking ref's element or descendent elements
        if (!ref.current || (event.target instanceof HTMLElement && ref.current.contains(event.target))) {
          return;
        }
        handler(event);
      };
      document.addEventListener("mousedown", listener);
      document.addEventListener("touchstart", listener);
      return () => {
        document.removeEventListener("mousedown", listener);
        document.removeEventListener("touchstart", listener);
      };
    },
    [ref, handler]
  );
}

I am using it in the component which is available in every page and for the handler just passing ()=> {setClose(true)}

how can I optimize it either in the component or in the hook itself for avoiding to listen the useless clicks that doesn't make any difference.