He simulado mi problema en codesandbox: https://codesandbox.io/s/trusting-babbage-ovj2we?file=/src/App.js
He creado un modal anidado, cuando se abre el modal principal, hay un botón que conduce al modal secundario. He pasado el useState de uso del modal principal al modal secundario como accesorio, quiero cerrar el modelo principal cuando se abre el modal secundario, sin embargo, ambos mueren cuando se hace clic en el botón.
He revisado mi código muchas veces pero no tengo idea de qué está causando esto.
No puede hacer esto, si el modal principal muere, el niño también morirá, pero puede hacerlo al no envolver el modal secundario dentro del modal principal, consulte el código de trabajo a continuación para su pregunta
import * as React from "react"; import Box from "@mui/material/Box"; import Modal from "@mui/material/Modal"; import Button from "@mui/material/Button"; const style = { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", width: 400, bgcolor: "background.paper", border: "2px solid #000", boxShadow: 24, pt: 2, px: 4, pb: 3 }; export default function NestedModal() { const [open, setOpen] = React.useState(false); const [openChild, setChildOpen] = React.useState(false); const toggleOpenParent = () => { setOpen(!open); }; const toggleChild = () => { setChildOpen(!openChild); }; return ( <div> <Button onClick={toggleOpenParent}>Open modal</Button> <Modal open={open} onClose={toggleOpenParent}> <Box sx={{ ...style, width: 400 }}> <Button onClick={() => { toggleChild(); toggleOpenParent() }} > Open Child Modal </Button> </Box> </Modal> <React.Fragment> <Modal hideBackdrop open={openChild} onClose={toggleChild}> <Box sx={{ ...style, width: 200 }}> <Button onClick={toggleChild}>Close Child Modal</Button> </Box> </Modal> </React.Fragment> </div> ); }