how to edit a api data

I'm trying to edit the api data on a Mui datagrid. I want a modal form to pop on clicking the edit icon. the popup works fine and all but the background is very dark, doesn't look like a normal pop background where the opacity is less. I want the row value to be in the form and save on submit as well the background be less dark

export default function ContactsCard(props) {
  const [ContactData, setContactData] = useState([]);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const showData = axios.get('http://localhost:8006/api/v2/get/beneficiaries-list').then(function (res) {
      try {
        var result = res.data;
        console.log(result.data)
        setContactData(result.data)
        // setLoading(false);
      }
      catch (error) {
        console.log(error)
      }
    })

  }, [])

  //// Declaring Column Values

  const columns = [
    { field: 'name', headerName: 'Nick Name', width: '130' },
    { field: 'details', headerName: 'Deposit address', width: '130' },
    {
      field: 'actions',
      type: 'actions',
      width: '130',
      headerName: 'Actions',
      cellClassName: 'actions',

      renderCell: (id) => {

        const handleDelete = (clickedUser) => {
          setContactData(ContactData.filter((user) => user.id !== clickedUser.id));
          console.log(clickedUser.id);
        };

        const handleOpen = () => setOpen(true)

        const handleClose = () => setOpen(false);

        return (
          <>
            <IconButton color="primary" onClick={handleOpen}>
              <EditIcon />
            </IconButton>
            <Modal
              aria-labelledby="transition-modal-title"
              aria-describedby="transition-modal-description"
              open={open}
              onClose={handleClose}
              closeAfterTransition
              BackdropComponent={Backdrop}
              BackdropProps={{
                timeout: 500,
              }}
            >
              <Fade in={open}>
                <FormControl sx={styles} mt={1} >
                  <Typography sx={{ fontSize: 16, fontWeight: 'bold' }} color="text.secondary" gutterBottom>
                    Add Contact
                  </Typography>
                  <Stack flexDirection='column' gap={1.5} mt={1}>
                    <TextField autoFocus required
                      id="filled-hidden-label-small"
                      label="Nick Name" variant="outlined" size="small"
                      onChange={''}
                      value={id.name}
                      name="Nick Name"
                      className="form-control"
                    />
                    <TextField required
                      id="filled-hidden-label-small"
                      label="Deposit Address" variant="outlined" size="small"
                      onChange={''}
                      value={'sdfsdf'}
                      name="Amount"
                      className="form-control"
                    />
                  </Stack>
                  <Stack flexDirection='row' justifyContent={'center'} gap={1.5} mt={1}>
                    <Button
                      variant="contained"
                      type="submit" color="error"
                      onClick={handleClose}
                      sx={{ alignSelf: 'center' }} >Cancel</Button>
                    <Button
                      variant="contained"
                      type="submit"
                      onClick={handleClose}
                      sx={{ alignSelf: 'center', backgroundColor: '#000073' }} >Submit</Button>
                  </Stack>
                </FormControl>
              </Fade>
            </Modal>
            <IconButton color="error" onClick={(e) => {
              handleDelete(id)
            }}>
              <DeleteIcon />
            </IconButton>
          </>
        );
      },
    },

  ];
  ///// ContactCard Return Data

  return (
    <Card {...props}>
      <CardContent>
        <ContactDataGrid rows={ContactData} columns={columns} />
      </CardContent>
    </Card>
  );
}

this is how my popup looks like

this is how I want it to be