Material-table with MUI full screen dialog

Question

Problem: Clicking a button in my material-table it opens the full screen dialog then closing the dialog, Then I am not able to click anywhere in the screen anymore. The dialog's wrapper container blocking the whole screen.

My material ui table component:

export default function MyMaterialTable() {
    const columns = [
       // columns here
    ];
    const [myState, setModalState] = React.useState(false);
    function modalHandleClick() {
      setModalState(!myState);
    }

    return (
        <div>
        <MaterialTable 
            title="My Material Table"
            columns={columns} data={tableData} // Retreived via api
            options={{ 
                selection: true, 
                filtering: true, 
                paging: true 
            }} 
            actions={[
                {
                tooltip: 'Action button that triggers the Fullscreen Dialog',
                icon: () => {return(<AddBoxIcon /> )},
                onClick: (evt, data) => modalHandleClick()
                }
            ]}
        />
        <MyFullScreenDialog modalState={myState} modalHandleClick={modalHandleClick} />
        </div>
    );
}

My Full Screen dialog component:

export default function MyFullScreenDialog (props) {
    const Transition = React.forwardRef(function Transition(p, ref) {
        return <Slide direction="up" ref={ref} {...p} />;
    });

    const handleClose = () => {
        props.modalHandleClick();
    };

    return(
        <div>
        <Dialog
            fullScreen
            open={props.modalState}
            onClose={handleClose}
            TransitionComponent={Transition}
        >
            <AppBar sx={{ position: 'relative' }}>
            <Toolbar>
                <IconButton
                edge="start"
                color="inherit"
                onClick={handleClose}
                aria-label="close"
                >
                <CloseIcon />
                </IconButton>
                <Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
                Sound
                </Typography>
                <Button autoFocus color="inherit" onClick={handleClose}>
                save
                </Button>
            </Toolbar>
            </AppBar>
            <List>
            <ListItem button>
                <ListItemText primary="Phone ringtone" secondary="Titania" />
            </ListItem>
            <Divider />
            <ListItem button>
                <ListItemText
                primary="Default notification ringtone"
                secondary="Tethys"
                />
            </ListItem>
            </List>
        </Dialog>
        </div>
    );
}

I am following these guides:

FullScreen Dialog MUI

Material Table

Answer 1

I think the problem is in your Transition. Try declaring the const Transition in a global context, outside the class declaration.

In your Fullscreen component:

const Transition = React.forwardRef(function Transition(p, ref) {
        return <Slide direction="up" ref={ref} {...p} />;
    });

export default function MyFullScreenDialog (props) {
    const handleClose = () => {
        props.modalHandleClick();
    };

    return(
        <div>
...