React MultiCascader DropDown displayed in background not in Dialog

Question

I'm currently facing a issue with the MultiCascader from rsuite.

I planned to put the cascader inside a CustomDialog. The selection is showh however the dropdown to select new items is not shown in the Dialog itself but in the background. See attached screenshots. Code of which is rendered inside the CustomDialog

return (
<>   
   <Grid container item xs={12} spacing={8}>
    <Grid item xs={12}>
      <Typography sx={{ color: 'black' }}>Please select skills!</Typography>
    </Grid>
    <Grid container item xs={12}>
      <Box style={{ display: 'block', width:800 }}>
        <MultiCascader
          style={{ width: 800 }}
          placeholder="Select Skills"
          data={serviceThesaurus}
          menuWidth={350}
          onCheck={(value) => handleSelect(value)}
          uncheckableItemValues={notSelectList}
          defaultValue={serviceList}
          onClean={handleClear}
          placement="autoVerticalStart"
        />
      </Box>
    </Grid>
    <Grid item xs={12}>
      <Box sx={{ border: 1 }} minHeight="50px" minWidth="200px">
        {skillList.map((service, ind) => (
          // eslint-disable-next-line react/no-array-index-key
          <Box margin="1%" key={ind}>
            <Typography>{service}</Typography>
          </Box>
        ))}
      </Box>
    </Grid>
  </Grid>

Code of the custom Dialog:

    const useStyles = makeStyles({
  dialogPaper: {
    minHeight: '97%',
    minWidth: '50%',
  },
});

interface ComponentProps {
  children: ReactNode;
  handleClose: () => void;
  handleSave: (() => void) | undefined;
  open: boolean;
}
export default function CustomDialog({
  open,
  handleClose,
  handleSave,
  children,
}: ComponentProps) {
  const classes = useStyles();
  const { t } = useTranslation('common');

  return (
    <Box
      sx={{
        backgroundColor: 'background.default',
        display: 'flex',
        flexDirection: 'column',
        height: '100%',
        justifyContent: 'center',
      }}
    >
      <Dialog
        open={open}
        onClose={handleClose}
        scroll="paper"
        aria-labelledby="scroll-dialog-title"
        aria-describedby="scroll-dialog-description"
        classes={{ paper: classes.dialogPaper }}
      >
        <DialogTitle id="scroll-dialog-title">{t('preferences')}</DialogTitle>
        <DialogContent dividers>
          <DialogContentText
            id="scroll-dialog-description"
            // ref={descriptionElementRef}
            tabIndex={-1}
          >
            {children}
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            {t('cancelButton')}
          </Button>
          {handleSave && (
            <Button onClick={handleSave} variant="contained" color="primary">
              {t('saveButton')}
            </Button>
          )}
        </DialogActions>
      </Dialog>
    </Box>
  );
}

Picture of the situation