What is the exact difference between these two react-router Route approaches?

Question

Can anyone explain the exact difference between these two Route syntaxes?

<Route path="/1">
  {(props) => {
    return <HOCColoredLorem {...props} />;
  }}
</Route>

vs

<Route path="/1" component={HOCColoredLorem} />

According to docs, the component prop is rendered with route props. As are children. However, I'm doing some animation between routes and they behave differently: it works with the first approach, and does not with the second. Working sandbox here. If you click between Pages 1 and 3, which use approach 1, the animation works fine. If you click between pages 2 and 4, which use approach 2, the animation does not work. Is this a bug?