Fade in transition not working using reactjs transitiongroup

Question

I need some help because I can't seem to understand what I'm doing wrong...

Bellow is my render method from my component and the css used. What I'm trying to do is while the user is not authenticated to see a splash screen instead of the router.

It works but the problem is that there is no fadeIn effect when showing the splash component (mounting), but there is a fadeOut fadeIn effect when transitioning from the splash screen to the router...

render

render = () => {

    let { user } = this.props;

    return (

        <TransitionGroup id='app' enter={true}>

            {user.authenticated && <CSSTransition
                in={true}
                classNames='fade'
                key={'router'}
                timeout={{ enter: duration, exit: duration }}
            >
                <Router />
            </CSSTransition>}
            {!user.authenticated && <CSSTransition
                in={true}
                classNames='fade'
                key={'splash'}
                timeout={{ enter: duration, exit: duration }}
            >
                <Splash />
            </CSSTransition>}

        </TransitionGroup>

    );

}

css

.fade-enter {
    opacity: 0.01;
}

.fade-enter.fade-enter-active {
    opacity: 1;
    transition: opacity 500ms ease-in;
}

.fade-exit {
    opacity: 1;
}

.fade-exit.fade-exit-active {
    opacity: 0.01;
    transition: opacity 500ms ease-in;
}