I have two grids, and in each grid I have a button that I would like to have its own unique modal. Whenever I try using Bootstrap's modals' however, I am only getting the first button's data to show up, even though I may be clicking on a different button that should display a different modal.

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>
    )
}