Mi ventana modal personalizada se abre pero no se cierra cuando hago clic en el área oscura. Investigué un poco y descubrí que la función setActive en el componente modal no establece el activo en falso por alguna razón. ¿Cómo puedo arreglar esto?

El archivo modal

 import React from 'react' import './style.css' const Modal = ({active, setActive, children}) => { return ( <div className={active?'modal_main active':'modal_main'} onClick={()=>{setActive(false)}}> <div className={active?'modal_content active':'modal_content'} onClick={e=>e.stopPropagation()}> {children} </div> </div> ) } export default Modal

Donde uso la ventana modal

 import React, { useState } from 'react' import Modal from '../../modal' import './style.css' function TagItem(props) { const [tagActive, setTagActive] = useState(false); return ( <div className='tag-item' onClick={()=>setTagActive(true)}> {props.tag} <Modal active = {tagActive} setActive = {setTagActive}> <div >{props.tag}</div> </Modal> </div> ) } export default TagItem

css de modal

 .modal_main{ width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.4); position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: 0.5s; z-index:1; } .modal_main.active{ opacity: 1; pointer-events: all; } .modal_content{ padding: 20px; border-radius: 12px; background-color: white; height: fit-content; width: fit-content; transform: scale(0.5); transition: 0.4s all; } .modal_content.active{ transform: scale(1); }

CSS del elemento de etiqueta

 .tag-item{ border: 1px limegreen solid; border-radius: 8px; background-color: rgb(178, 246, 119); width: fit-content; padding: 2px; margin: 2px; cursor: default; } .tag-item:hover{ cursor: default; background-color: rgb(1, 152, 1) ; }