Mui Snackbar Div сохраняется на DOM после закрытия ⇐ CSS

[Anonymous]

Я создал глобальный модал с целью называть его только тогда, когда мне это нужно, но проблема в том, что Snackbar Div сохраняется в DOM, и это приводит к блокированию определенных элементов, потому что они Ниже этого див. Есть идеи, в чем проблема?

Код: Выделить всё

export function GlobalAlert() {
const {alertState, handleClose} = useAlertContext();
const {open, type, message} = alertState;

function TransitionDown(props: TransitionProps) {
return ;
}

return (


{message}


);
}
< /code>
Контекст, где я получаю информацию < /p>
const AlertContextProvider = (props: any) => {
const [alertState, setAlertState] = React.useState({
open: false,
type: "error",
message: "",
});

const handleClose = React.useCallback((event?: React.SyntheticEvent | Event, reason?: string) => {
if (reason === "clickaway") {
return;
}
setAlertState({
open: false,
type: "error",
message: "",
});
}, []);

const value = React.useMemo(
() => ({
alertState,
setAlertState,
handleClose,
}),
[alertState, handleClose],
);

return ;
};

Изображение ошибки


Подробнее здесь: https://stackoverflow.com/questions/749 ... ing-closed