Displaying modal component as a card in reactjs

Question

So for my project I'm using mui elements for the UI part but for displaying real time data on a button click I got this answer in which the person had used Modal component from react-bootstrap that basically ruined the alignment of my website but it worked. I want the same functionality of Modal component from the react-bootstrap package in the Modal component of mui package since i want a close button option and onClick event handler. Please help me fix this!!

this is main Dashboard page code :(ps: i may have added styling that might change nothing :'))

export default function DashboardAppPage() {
  const theme = useTheme();
 

  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);



  return (
    <>
      <Helmet>
        <title> Dashboard | Minimal UI </title>
      </Helmet>

      <Container maxWidth="xl"  style={{position:'fixed'}}>
      <Button variant="contained" size="large" onClick={handleShow} sx={{ mb: 5 }}> 
              Scan System
      </Button> 
         
      
      {/* <Typography variant="h4" sx={{ mb: 5 }}>
      <iframe title="MyFrame" 
                style={{ border:"none" ,backgroundColor: "transparent", width: "100%", height: "100%"}} 
                src="http://localhost:5000/data" />


     
      </Typography> */}

      <Typography variant="h4" sx={{ mb: 5 }}> hi</Typography>
      <ModalLog  show={show} onHide={handleClose} />
   </Container>
    </>
  );
}

this is the code where i used modal component from react-bootstrap:

function ModalLog({ show, onHide }) {

  return (
    
  
    <>
   
        <Modal  style={{display:"flex",justifyContent:"center",alignItems:"center" ,height:"250px" ,width:"250px" ,position:"absolute", zIndex:1200}} show={show} onHide={onHide}>
          <Modal.Header>
            <Modal.Title>Real Time Log</Modal.Title>
          </Modal.Header>
          <iframe title='Frame'
            src="http://localhost:5000/data"
            style={{background: "green",color:"yellow" ,border: "none", height:"100vh", width:"100vw" }}/>
          <Modal.Body> {logs} </Modal.Body>
          <Modal.Footer>
            <Button variant="contained" size="small" onClick={onHide}>
              Close
            </Button>
          </Modal.Footer>
          
       </Modal>
      </>
  );
}

and this is the code where i used modal component from mui-react:

function ModalLog({ show, onHide }) {

  return (
    
  
    <>
   
      <Modal
            open={show}
            onClose={onHide}
            aria-labelledby="parent-modal-title"
            aria-describedby="parent-modal-description"
          >
          <Box sx={{mx:5}}>
              <Typography id="modal-modal-title" variant="h6" component="h2">
                Text in a modal
              </Typography>
              <Typography id="modal-modal-description" sx={{ mt: 2 }}>
              <iframe title="MyFrame" 
                          style={{ border:"none" ,backgroundColor: "green", width: "100%", height: "100%"}} 
                          src="http://localhost:5000/data" />
              </Typography>
            </Box>
          
       </Modal>
      </>
  );
}

I hope this is not a dumb question as i am new to react.