How to animate elements in React on component update?

Question

css

Hello!
I have something like a weather widget. And he has a list of cities for which he shows the current weather at a certain interval.
When changing the title, temperature. In general, when changing the state (updating) of a component, I want to animate the html element. I have never used animation in React before. According to the guide, I installed react-transition-group. Wrapped the header first to animate at least it. The animation works, but only when the component is loaded for the first time, and then react simply changes the content, and the classes of the elements remain the same, so the animation does not happen more than once.
Please tell me how to implement this or give a tip.
Thank you)

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