React: Outside Click Detection

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

export default SomeFunctionComponent(props) {
  const elementRef = useRef(null);

  useEffect(() => {
    function handleOutsideClick(event) {
      if (ref.current && !ref.current.contains(event.target)) {
        do something
      }
    }
    document.addEventListener("mousedown", handleOutsideClick);
    return () => {
      // Unbind the event listener on clean up
      document.removeEventListener("mousedown", handleOutsideClick);
    };
  }, [elementRef]);
}

  return (
    <div ref={elementRef}>{props.children}</div>;
  )
}