useRef 사용해서 컴포넌트 바깥을 클릭했을 때 컴포넌트가 닫히게 하기

USEREF

import { useEffect, useRef } from 'react';
    
    const handleDetailMenuClose = () => {
        setMenus((prevMenus) =>
          prevMenus.map((menu) => ({
            ...menu,
            clicked: false,
          }))
        );
    };
    
    const appRef = useRef(null);
  
    useEffect(() => {
        const handleOutsideClick = (event) => {
        if (appRef.current && !appRef.current.contains(event.target)) {
            handleDetailMenuClose();
        }
        };

        document.addEventListener('mousedown', handleOutsideClick);
        return () => {
        document.removeEventListener('mousedown', handleOutsideClick);
        };
    }, []);

    ...

    return
            <div ref={appRef}>
                <DetailMenus menus={menus} />
            </div>