React animation: doubled element on state change

I'm building an automatic slideshow that switch images every 5 seconds. I use the ReactCSSTransitionGroup to create a fade in method when the new image comes in. The issue is when the new image is fading in, the old image is still there and both images are showing on the screen, the old image won't leave until the new image is completely show up. How do I fix this?

Basically in the parent component, I have a setInterval method that change the active image every 5 seconds. So how do I make the old image disappear the moment the new one is starting to fade it so that it won't change my page?
Thank you

Remove the exit animation by setting the transitionLeave property to false, and remove the transitionLeaveTimeout property entirely. You've configured ReactCSSTransitionGroup to animate on enter and leave with a 500ms timer.

In my opinion, the transition would be nicer if the exiting Slide fades out while the entering Slide fades in. For this effect, you would need both Slide elements to be on top of each other, via absolute positioning. Here's an example of this: http://codepen.io/yeahjohnnn/pen/rrobvR