React MultiCascader DropDown displayed in background not in Dialog - reactjs

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