Tengo dos cuadrículas, y en cada cuadrícula tengo un botón que me gustaría tener su propio modal único. Sin embargo, cada vez que intento usar los modales de Bootstrap, solo obtengo los datos del primer botón, aunque puedo estar haciendo clic en un botón diferente que debería mostrar un modal diferente.

 import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Typography from '@mui/material/Typography'; import Modal from '@mui/material/Modal'; export default function myApp() { return( <div> <button className="mybutton" onClick={handleOpen}>Download</button> <Modal open={open} onClose={handleClose} > <Box sx={style}> <Typography id="my-modal" variant="h6" component="h2"> Download </Typography> <Typography id="my-modal" sx={{ mt: 2 }}> Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </Typography> </Box> </Modal> <button className="mybutton" onClick={handleOpen}>Download</button> <Modal open={open} onClose={handleClose} > <Box sx={style}> <Typography id="my-modal" variant="h6" component="h2"> Download here </Typography> <Typography id="my-modal" sx={{ mt: 2 }}> <img src="https://wallpaperaccess.com/full/145444.jpg"/> </Typography> </Box> </Modal> </div> ) }