MUI Data Grid Editable and TextFields cannot edit or focused when inside MUI Dialog

Question

Currently working with React project using Material UI framework.

I use MUI Data-Grid together with MUI Dialog.

The problem is I can't edit any Text Fields or Input fields that are inside the Dialog. I also tried adding disableAutoFocus and disableEnforceFocus but nothing works

Is there any solution for this? Tried searching but nothing works for my case.

Here's my current code.

 const ShopDialog = forwardRef((props, ref)=> {
  const [open, setOpen] = React.useState(false);
  const [products, setProducts] = React.useState([]);

  useImperativeHandle(ref, () => ({
    buyProduct(products) {
      setProducts(products);
      setOpen(true);
    }
  }));

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

  const columns = [
    { field: 'uuid', headerName: 'UUID', width: 150 },
    {
      field: 'name',
      headerName: 'Product name',
      width: 320,
    },
    {
      field: 'category',
      headerName: 'Category',
      width: 200,
    },
    {
      field: 'amount',
      headerName: 'Amount',
      type: 'number',
      width: 150,
      editable: true,
      valueSetter: (params)=>{
        let value = parseFloat(params.value);
        if(isNaN(value) || value < 0){
          return {...params.row}
        }else{
          return {...params.row, amount: value || ''}
        }
        
      }
    },
  ];

  return (
    <Dialog
      onClose={handleClose}
      aria-labelledby="customized-dialog-title"
      open={open}
      disableAutoFocus 
      disableEnforceFocus
      maxWidth='md'
      fullWidth
    >
      <DialogContent dividers sx={{padding: 0, height: 500 }}>

        <DataGrid
          getRowId={(row)=>row.uuid}
          rows={products}
          columns={columns}
          experimentalFeatures={{ newEditingApi: true }}
        />
        
      </DialogContent>
      <DialogActions>
        <Button variant='contained' 
          size='small' 
          onClick={handleClose}>
          Cancel
        </Button>
        <Button variant='contained' 
          size='small' 
          onClick={handleSubmit}
          >
          Submit
        </Button>
      </DialogActions>
    </Dialog>
  );
})