Как анимировать элементы в React при обновлении компонента?

Question

[One of Us]

Здравствуйте!

У меня есть, что-то вроде виджета погоды. И у него есть список городов по которым он показывает текущую погоду с определенным интервалом.

При смене заголовка, температуры. В общем при смене состояния (обновлении) компонента я хочу анимировать html элемент. Я никогда раньше не пользовался анимацией в React. По гайду, я установил react-transition-group. Обернул для начала заголовок, чтобы анимировать хотя бы его. Анимация работает, но только при первой загрузке компонента, а дальше react просто меняет содержимое, а классы у элементов остаются прежними, по этому анимация больше одного раза не случается.

Подскажите, пожалуйста, как это реализовать или дайте наводку.

Спасибо)

<TransitionGroup>
          <CSSTransition
            in={true}
            appear={true}
            timeout={300}
            classNames="fade"
          >
            <h2 className="weather__title">{name}</h2>
          </CSSTransition>
        </TransitionGroup>