Я пытаюсь использовать анимацию при изменении состояния и монтировании элементов, пробовал способ, упомянутый в документации React Transition Group, но не получилось.
У меня есть что-то вроде этого интерфейса: 
Элемент в центре круга является активным элементом и изменяется, когда пользователь выбирает другие элементы.
Я хочу анимационные эффекты fadeIn и fadeOut при изменении элемента.
создал пример кода codesandbox link
фрагмент кода:
jsx:
<TransitionGroup>
{this.state.items.map((data, index) => (
<CSSTransition key={index} timeout={1000} classNames="item">
<div
className={"list " + (index === 2 ? " active" : "")}
key={index}
onClick={() => this.setItems(data)}
>
<span>{data}</span>
</div>
</CSSTransition>
))}
</TransitionGroup>
css:
.item-enter {
opacity: 0;
}
.item-enter-active {
opacity: 1;
transition: opacity 1000ms ease-in;
}
.item-exit {
opacity: 1;
}
.item-exit-active {
opacity: 0;
transition: opacity 1000ms ease-in;
}