export const Modal = () => {
  const ref = React.useRef<HTMLDivElement | null>(null);
  React.useEffect(() => {
    const handleClickSomewhere = (event: MouseEvent) => {
      if (
        event.target instanceof HTMLElement &&
        !ref.current?.contains(event.target)
      ) {
        console.log('close');
      }
    };
    document.body.addEventListener('click', handleClickSomewhere);
    return () => {
      document.body.removeEventListener('click', handleClickSomewhere);
    };
  }, []);

  return (
    <div ref={ref}>
      <div>中身</div>
    </div>
  );
};