React hooks window addEventListener local variables

dropdown-hooks.tsx

import React, { useState, useRef, useEffect, RefObject } from "react";

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

type IDropdowns = keyof typeof DROPDOWNS | null;

type IUseDropdown = [
  RefObject<HTMLInputElement>,
  IDropdowns,
  (val: IDropdowns) => void
];

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 ];
};

function Header(props: IHeaderProps) {
  const [ headerRef, openDropdownName, setOpenDropdownName ] = useDropdowns();

  return (
    <nav className="navbar navbar-expand-lg header" ref={headerRef}>
      // ...
    </nav>
  );
}

export default Header;