Группа переходов реакции появляется, переходы не работают должным образом

Я использую реагирующая переходная группа для обработки анимированных CSSTransitions при рендеринге компонента. Я хочу простое исчезновение компонента.

Выходной переход вроде бы работает правильно, а вот переходный - нет.

Если я поставлю отладчик на свойство onEnter, я увижу, что переход на самом деле «должен» работать так, как ожидалось. Запускается состояние ввода-активности, элемент начинается с непрозрачности 0,1, и если я возобновляю работу отладчика, происходит переход.

Но без отладчика, когда компонент рендерится, даже если к компоненту добавляется состояние enter-active, оно просто сразу видно — непрозрачность не исчезает.

Вот мой код:

<TransitionGroup component = {null}>
{mobileSelectorsActive && 
<CSSTransition 
    classNames = "anim_mobile_selectors" 
    timeout = {5000}
    //appear = {true}
    //mountOnEnter = {true}
    onEnter = {()=>{
        //debugger;
    }}
>
<div>...</div>
</CSSTransition>
}
</TransitionGroup>

и CSS:

.anim_mobile_selectors {
    &-enter {
        opacity: 0.1;
        transition: opacity 5000ms linear;
    }
    &-enter-active, &-enter-done {
        opacity:1; 
    }
    &-exit {
        opacity:1;
    }
    &-exit-active {
        opacity: 0.1;
        transition: opacity 5000ms linear;
    }
}