Menu.js

import useClickOutside from './useClickOutside';

const Menu = () => {
  const menuRef = useRef();

  const onClickOutside = () => {
    console.log('click');
  }

  useClickOutside(menuRef, onClickOutside)

  return (
    <div ref={menuRef}>
      todo
    </div>
  )
}

useClickOutside.js

import React, {useEffect} from 'react';

const useClickOutside = (elRef, callback) =>{
  useEffect(() => {
    const handleClickoutside = e => {
      if (elRef?.current?.contains(e.target) && callback) {
        callback(e);
      }
    }

    document.addEventListener('click', handleClickoutside, true)
    return () => {
      document.removeEventListener('click', handleClickoutside, true);
    }
  }, [callback, elRef])
}