Div закусочной MUI сохраняется в DOM после закрытия ⇐ CSS

[Гость]

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

Мой компонент GlobalAlert:

экспортная функция GlobalAlert() { const {alertState, handleClose} = useAlertContext(); const {open, type, message} = alertState; функция TransitionDown (реквизит: TransitionProps) { return ; } возвращаться ( {сообщение} ); } Контекст, из которого я получаю информацию

const AlertContextProvider = (реквизит: любой) => { const [alertState, setAlertState] = React.useState({ открыто: ложь, введите: «ошибка», сообщение: "", }); const handleClose = React.useCallback((событие?: React.SyntheticEvent | Событие, причина?: строка) => { if (причина === "clickaway") { возвращаться; } setAlertState({ открыто: ложь, введите: «ошибка», сообщение: "", }); }, []); константное значение = React.useMemo( () => ({ оповещениеState, установитьAlertState, ручкаЗакрыть, }), [alertState, handleClose], ); return ; }; Изображение ошибки