React Hooks custom hook use typescript

react-hooks-typescript.tsx

enum DROPDOWNS {
  REPORT = "REPORT",
  USER = "USER"
}

type IDropdowns = keyof typeof DROPDOWNS | null;

type IUseDropdown = [
  RefObject<HTMLInputElement>,
  IDropdowns,
  React.Dispatch<React.SetStateAction<IDropdowns>>
];

const useDropdowns = (): IUseDropdown => {
  const headerRef = useRef<HTMLInputElement>(null);
  const openDropdownVarRef = useRef<IDropdowns>(null);
  const [openDropdownName, setOpenDropdownName] = useState<IDropdowns>(null);

  useEffect(() => {
    function onGlobalClick(e: MouseEvent) {
      if (!openDropdownName) {
        return;
      }
      if (!(e.target instanceof Element)) {
        return;
      }
      if (!headerRef.current || headerRef.current.contains(e.target)) {
        return;
      }
      setOpenDropdownName(null);
    }

    window.addEventListener("click", onGlobalClick);
    return () => {
      return window.removeEventListener("click", onGlobalClick);
    };
  }, [openDropdownName]);

  return [ headerRef, openDropdownName, setOpenDropdownName ];
};