Así que he estado pensando en esto por un tiempo, y me gustaría tener esto resuelto de una vez por todas. Si es posible, sería genial explicar por qué piensas que cualquier forma funciona. ¿Tiene sentido que un Modal administre su propio estado o esto debería ser administrado por su Padre? En el código a continuación, el primer Modal es tonto y está completamente administrado por su Padre. En el segundo Modal, puede ser administrado tanto por su Padre como por sí mismo.

 import Button from "../components/button"; const Modal = (props: { onClose: () => void }) => { const { onClose } = props; return ( <> <div className="wrapper"> <p>Hello modal</p> <button onClick={() => onClose()}>Close</button> </div> </> ); }; const ModalWithState = (props: { active?: boolean; onClose: () => void }) => { const { active, onClose } = props; const [activeS, setActiveS] = useState(false); useEffect(() => { if (!active && !hasParentControl()) { setActiveS(true); return; } setActiveS(active); }, [active]); const hasParentControl = () => typeof active !== null; const onCloseModal = () => { setActiveS(false); onClose(); }; return ( <> {activeS && ( <div className="wrapper"> <p>Hello modal</p> <button onClick={() => onCloseModal()}>Close</button> <button onClick={() => setActiveS(true)}>Open</button> </div> )} </> ); }; const ParentComponent = () => { const [activeModal, setActiveModal] = useState(false); const openModal = () => setActiveModal(true); return ( <> {activeModal && <Modal onClose={() => setActiveModal(false)} />} <ModalWithState active onClose={() => setActiveModal(false)} /> <Button onClick={() => openModal()}>Open modal</Button> </> ); };