Trigger Animate.css animation onClick in React

Hi, I’m having trouble in making animation trigger on each click - it only triggers once the page mounts.

My solution was to add a Math.random key to text I want to animate, but it doesn’t work once I add new handler functions, because it triggers animation if any of the functions fire.

I know that I can use synthetic event onAnimationEnd, but I want to trigger animation again on every click, without waiting for it to end.

I managed to get it to work in a bit of a hacky way, by adding one animation in setState of onClick function and then adding a different one in onAnimationStart.

What better way is there to solve this problem, ideally one that follow best practices?

Reprex :

Link to project repository:

Also if you have any overall feedback on the code it would be much appreciated, since this is my first solo React exercise project and I’m still quite new to web development world.

Thank you for your time!