import : 
import Modal from '@mui/material/Modal'; 
import Button from '@mui/material/Button'; 
import CloseIcon from '@mui/material/Close'; 
import : scss
import "@/assets/scss/components/modal.scss";
component :  https://mui.com/material-ui/react-modal/

component : default
Open modal
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
<Button onClick={handleOpen} variant="contained" color="primary" size="medium">Open modal</Button>
<Modal
      open={open}
      onClose={handleClose}
      aria-labelledby="modalTitle"
      aria-describedby="modalDescription"
>
      <Box className="modal modal-score">
            <Button className="modal-close" variant="contained" color="secondary" size="medium" onClick={handleClose}>
                  <CloseIcon/>
            </Button>
            <div className="inner">
                  <div className="icon">
                       {/* <span className="feather icon-check"></span> */}
                        <span className="feather icon-x"></span>
                  </div>
                  <Typography id="modalTitle" variant="h2" className="h4 title">
                        <strong>topic</strong>
                  </Typography>
                  <Typography id="modalDescription" variant="body1" className="h6 desc">
                        desc
                  </Typography>
                  <div className="action">
                        <Button variant="contained" color="secondary" size="medium" onClick={handleClose} >
                              OK
                        </Button>
                  </div>
            </div>
      </Box>
</Modal>