React animation starts before first one is finished

I am using React to make my website and have encountered a problem. The code I am using is exactly like this example: http://ift.tt/19h2zGY

But when I click one of the links the leaving animation should start first, then the DOM nodes (RouteHandler) should get replaced and the entering animation should start for the new elements.

But it starts all at the same time, so the leaving animation and the entering animation start at the same time.

Here is a video of what's happening: https://vid.me/yWRg

Thanks, DennisvB