two custom hooks; 1 for appending a DOM node to the document for use in a Portal. Another for conditionally adding an event listener to handle outside of flyout menu clicks (so it can close)

hooks.ts

const useDOMDiv = (changeToUpdate: number = 1) => {
  const nodeRef = React.useRef(document.createElement('div'));
  React.useEffect(() => {
    document.body.appendChild(nodeRef.current);
    return () => document.body.removeChild(nodeRef.current);
  }, [changeToUpdate]);

  return nodeRef.current;
};

const useOutsideClick = (
  node: HTMLDivElement,
  isOpen: boolean,
  onOutsideClick: () => void,
) => {
  React.useEffect(() => {
    const handleOutsideClick = (ev: MouseEvent) => {
      if (!node.contains(ev.target as Element)) {
        onOutsideClick();
      }
    };

    if (isOpen) {
      document.addEventListener('click', handleOutsideClick);
    }
    return () => document.removeEventListener('click', handleOutsideClick);
  }, [isOpen]);
};

you'd use them like this:

const [isOpen, setMenuState] = useState(false);
const close = () => setMenuState(false);

const node = useDOMDiv();
useOutsideClick(node, isOpen, close);