hooks-clickOutside.js

import { useEffect } from 'react'

function useClickOutside(ref, onClickOutside) {
  useEffect(() => {
    const handleClick = (event) => {
      if (!ref.current || !ref.current.contains(event.target)) {
        onClickOutside(event)
      }
    }
    window.addEventListener('click', handleClick)
    return () => window.removeEventListener('click', handleClick)
  }, [onClickOutside])
}

export default useClickOutside

Usage

import React, { useRef, useCallback } from 'react'
import useClickOutside from './hooks-clickOutside'

function Box() {
  const ref = useRef();
  const handleOutsideClick = useCallback(event => {
    console.log("clicked outside", event);
  });

  useClickOutside(ref, handleOutsideClick);

  return (
    <div
      ref={ref}
      style={{
        width: 200,
        height: 200,
        backgroundColor: "red"
      }}
    >
      Box
    </div>
  );
}