React simple page slider transition issues

See more:

animation

rendering

React

Hello everyone, I am trying to create a React page slider app with 3 simple page components (home, about, contact). I created a component PageSliderMgr to slide the current page out of the view and slide in the page on the link. The problem is that the transition animation only works when you click on the menu option for the current page then click on the menu for any other page. For example when you first go the page, the animation works. If you click any other page it does not work. If you click on the menu option for whatever the current page is, then click on another page, it works. It has to do with forcing a rendering, but everything I've tried cause an infinite rendering loop. I need help and advice to solve this issue. Thanks in advance.

the project online: React App[^]

the code: GitHub - quisqueya/simpleSlider[^]

What I have tried:

I've tried many ways to force a rerender using state variables but it has always ended up in a loop.