Фоновый фильтр CSS игнорирует продолжительность перехода (ReactJS) ⇐ CSS

[Anonymous]

У меня есть модальный компонент в React, который появляется лишь иногда. Я не могу опубликовать весь код, потому что его слишком много, но я упрощу и опубликую все, что смогу.
ПРОБЛЕМА:
Модальное окно Предполагается, что переход будет легким, поскольку эффект размытия, выполняемый на фоне, должен быть медленным и переходным (переход заключается в том, что он должен перейти от отсутствия размытия к размытию (5 пикселей) примерно за 5 секунд). Однако вместо этого он появляется мгновенно, что действительно неприятно и почти вызывает головную боль. Я не уверен, почему здесь игнорируются значения длительности перехода. Как это исправить?
Я также открыт для других предложений, например, вместо этого использовать функцию «реагировать-нарастание» или «реагировать-переход» на компонентах, если делать это через CSS невозможно. вариант.
ПРИМЕЧАНИЕ: props.children состоит из нескольких других компонентов начальной загрузки; по сути, это остальная часть моего веб-приложения со статусом сверху.
КОД:
export const StatusContainer: FunctionComponent<
PropsWithChildren
> = (props) => {
const [showModal, setShowModal] = useState(false);

useEffect(() => {
checkSystemStatus();
}, []);

const checkStatus = async () => {
try {
const status: boolean = await getStatus();
setShowModal(status)
} catch (error) {
console.error(error);
}
};

return (

{showModal &&

}
{props.children}

);
}
};

export const MyModal = () => {
return (



{'Hello World'}



);
};

CSS:
.modal-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: backdrop-filter 5s linear;
backdrop-filter: blur(5px);
z-index: 10;
display: flex;
justify-content: center;
}

.status-container {
position: fixed;
top: 150px;
max-width: 950px;
width: 75%;
max-height: 75%;
}

.status-body {
width: 100%;
background-color: darkslategray;
border: 2px solid gray;
color: white;
padding: 20px;
margin: auto;
display: grid;
justify-items: center;
}


Подробнее здесь: https://stackoverflow.com/questions/784 ... on-reactjs