Reactjs: постепенное появление данных не работает должным образом

У меня есть кнопка в компоненте приложения, если я нажимаю на эту кнопку, я получаю следующий элемент в массиве в компоненте, но проблема в том, что переход с постепенным проявлением работает только для первого элемента, а не для следующего элемента. как я могу позволить плавному переходу работать для следующих элементов?

Мой код:

import React, { Component } from 'react';
import FadeIn from 'react-fade-in';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {indexTeam:0}
  }

  nextTeam=() => {
     this.setState({ indexTeam: (this.state.indexTeam + 1) % teamList.length });
  };

  render() {
    const teams = teamList[this.state.indexTeam];
    return (
      <div>
       <FadeIn><h3>{teams.name}</h3></FadeIn>
       <br/>
       <button onClick = {this.nextTeam}>Next Team</button>
      </div>
    );
  }
}

const teamList = [
  {
    name: "1- Manchester United"
  },
  {
    name: "2- Fc Barcelona"
  },
  {
    name: "3- Inter Milan"
  },
  {
    name: "4- Liverpool"
  }
];

export default App;