How to apply animation on onClick event in React

Question

I want to create add to favorites button with IonIcons library. I put the icon name and the animation state in the React state.

Then I want to change those with onClick function. But for some reason animation doesn't work. It is nothing special, just true or false.

The state is correct. If I console log it:

• Before click : {icon: "md-heart-outline", iconAnimation: false}
• After click: {icon: "md-heart", iconAnimation: true}

But the animation isn't applied. The icon changes and that is fine but the animation doesn't work.

My code is as follows:

State:

constructor(props){
        super(props);

        this.state = {             
            icon: "md-heart-outline",
            iconAnimation: false
        }
    }

In render function I have an IonIcon component as follows:

render(){
    return (
        <Ionicon
             icon={this.state.icon}
             fontSize="30px"
             color="red"
             beat={this.state.iconAnimation}
             onClick={this.handleFavorites.bind(this, vehicle, favorites)}
             style={{cursor: "pointer"}}
        />
    )
}

And function handleFavorites is as follows:

handleFavorites(vehicle, favorites, event){
    this.setState({icon: "md-heart", iconAnimation: true});
}