컴포넌트에 딸린 모달창 닫기..,.,.,.

편집하기 모달창 닫기
대체 어떻게 해야할가..,

현재 생성된 list 중, 각 카드를 눌렀을 때 해당 카드안에서 모달창을 띄움
( 앞으로 map 으로 화면 내에서 띄우는 효과등은 각 map 된 컴포넌트 안에서 하나씩 그리게 넣어주자 )

{
     card.modal
     ?
     <ModifyContent idx={index} num={card.card_id} />
     :
     null
}
                        

문제점 : 이 부분만. 클릭해야지 모달창이 닫힘
구현하고 싶은 기능 : 모달창이 열린 후 바깥을 클릭하면 모달창 무조건 닫히게, 다른 모달창 열기 눌러도 닫히게

하기 코드가 전혀 먹히지 않고 있음

const handleClickOutside = async ({target})=>{

        // card의 index를 title로 넘김
        let idx = target.title
        // 해당 값을 state로 저장하고
        setOpenIdx(idx)

        let copyModal = [...cards];

            if(!modalEl.current.contains(target)) {
            
            console.log(copyModal,'copied')

            if(copyModal.length !== 0) {
                copyModal[idx]= {
                    ...copyModal[idx],
                    modal:!copyModal[idx].modal
                }
                setCards(copyModal)
                setIsOpen(idx)
            }
            
        }else {
            if(copyModal.length !== 0) {
                copyModal[idx]= {
                    ...copyModal[idx],
                    modal:!copyModal[idx].modal
                }
                setCards(copyModal)
                setIsOpen(idx)
            }
            
        }

        
    }