I am currently using modal for some use in my authentication form. However, I'm having trouble with the css.

Currently the modal is in a theme provider:

<ThemeProvider theme={theme}>
...

<Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Box
          sx={{ width: 400 }}
          style={{
            position: "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            width: 400,
            border: "2px solid #000",
            boxShadow: 24,
            p: 4,
          }}
        >
          <Typography id="modal-modal-title" variant="h6" component="h2">
            Verification
          </Typography>
          <p>Please enter the verification code sent to your email.</p>
          <TextField
            label="Standard"
            variant="standard"
            onChange={(e) => setVerifyCode(e.target.value)}
          ></TextField>
          <Button variant="outlined" onClick={() => handleVerify(verifyCode)}>
            Verify
          </Button>
        </Box>
      </Modal>
</ThemeProvider>

where I write the custom theme:

const theme = createTheme({
  palette: {
    mode: "dark",
    primary: {
      main: "#bda06a",
    },
    secondary: {
      main: "#f5f200",
    },
  },
  typography: {
    fontFamily: "Cormorant",
    //fontFamily: "Castellar",
  },
  modal: {
    bgcolor: "#ffffff", //even if i write this it doen not work.
  },
});

However, as shown in the picture, the half-transparent background mess everything up. I was wondering how to change the style (an at where) so that the modal shows its content very clearly? I would be very appreciated if anyone could help!