react hook that notifies when clicking outside an element

useClickAway.ts

import React from "react";

export function useClickAway<E extends HTMLElement | null>(
  ref: React.MutableRefObject<E>,
  onClickAway: () => void
) {
  const wasInsideRef = React.useRef(false);
  React.useLayoutEffect(() => {
    const onClick = (event: MouseEvent) => {
      if (ref.current?.contains(event.target as Node)) {
        wasInsideRef.current = true;
      } else {
        if (wasInsideRef.current) {
          onClickAway();
        }
        wasInsideRef.current = false;
      }
    };
    document.addEventListener("click", onClick);
    return () => document.addEventListener("click", onClick);
  }, [ref, onClickAway]);
}