используйте Animate.css в ReactJS с помощью response-animated-css

Я пытаюсь реализовать Animate.css в React, и в ходе своих исследований я нашел пакет react-animated-css, который кажется довольно простым, однако я не мог заставить его работать.

В документации (если это можно назвать документацией) было сказано, что пользователь должен включить Animate.css на HTML-страницу, я этого не делал, так как я работаю с React и HTML-страницы нет, но я установил animate.css через npm.

Вот пример моего кода:

import {Animated} from 'react-animated-css'

class ComponentTest extends Component {

  render () {

   return (
    <div>
      <Animated 
         animationIn="fadeInDown" 
         animationOut="zoomOut" 
         animationInDuration={1000} 
         animationOutDuration={1000} 
         isVisible={true}
      >
          <h1 style={{backgroundColor: 'red'}}>TESTE 1</h1>
      </Animated>
    </div>
   )
 }
}

Я также пытался установить isVisible динамически, используя состояние, но безуспешно:

import {Animated} from 'react-animated-css'

class ComponentTest extends Component {

  state = {animacao: false}

  toggleAnimation = () => {

     let animacao = !this.state.animacao
     this.setState({animacao})
  }

  render () {

   return (
    <div>
      <Animated 
         animationIn="fadeInDown" 
         animationOut="zoomOut" 
         animationInDuration={1000} 
         animationOutDuration={1000} 
         isVisible={this.state.animacao}
      >
          <h1 style={{backgroundColor: 'red'}}>TESTE 1</h1>
      </Animated>
      <button onClick={this.toggleAnimation} >Animação</button>
    </div>
   )
 }
}

Когда я проверяю свой компонент, я вижу, что классы применяются в обоих случаях:

Вот страница пакета: https://www.npmjs.com/package/react-animated-css

Есть идеи, что я делаю не так?

P.S. Использование этого пакета не обязательно, я полностью открыт для предложений.