ReactCSSTransitionGroup not animating on component change - reactjs

Question

I have a component that switches child components inside its ReactCSSTransitionGroup when its prop stage changes.
When the page loads the transitionAppear works fine but there is no transition leave or transition enter animation for when the prop changes / when the component inside ReactCSSTransitionGroup changes. When the stage changes from 'CONTENT' to 'BOOKING' the Content component should fade out while Booking component fades in.
Page component:
import React, {PropTypes} from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
export default class Page extends React.Component {
static propTypes = { stage: PropTypes.string };
getComponent(stage) {
switch (stage) {
case 'CONTENT': {
return (
<Content />
);
}
case 'BOOKING': {
return (
<Booking />
);
}
}
}
shouldComponentUpdate(nextProps) {
return nextProps.stage !== this.props.stage;
}
render() {
return (
<div>
<ReactCSSTransitionGroup
transitionName='component-fade'
transitionAppear={true}
transitionEnter={true}
transitionLeave={true}
transitionEnterTimeout={500}
transitionAppearTimeout={500}
transitionLeaveTimeout={500}
component='div'
>
{this.getComponent(this.props.stage)}
</ReactCSSTransitionGroup>
</div>
);
}
}
CSS:
.component-fade-enter {
opacity: 0;
transform: translateY(+2em);
}
.component-fade-enter.component-fade-enter-active {
opacity: 1;
transform: translateY(0em);
transition: opacity 200ms ease-out, transform 200ms ease-in;
}
.component-fade-leave {
transform: translateY(0em);
opacity: 1;
}
.component-fade-leave.component-fade-leave-active {
transform: translateY(+2em);
opacity: 0;
transition: opacity 200ms ease-in, transform 200ms ease-in;
}
.component-fade-appear {
opacity: 0;
transform: translateY(+2em);
}
.component-fade-appear.component-fade-appear-active {
opacity: 1;
transform: translateY(0em);
transition: opacity 200ms ease-out, transform 200ms ease-in;
}

Answer 1

Figured out answer to my own question, just had to add a div wrapper to the components whose key changes as this.props.stage changes
<ReactCSSTransitionGroup
transitionName='component-fade'
transitionAppear={true}
transitionEnter={true}
transitionLeave={true}
transitionEnterTimeout={500}
transitionAppearTimeout={500}
transitionLeaveTimeout={500}
component='div'
>
<div key={this.props.stage}>
{this.getComponent(this.props.stage)}
</div>
</ReactCSSTransitionGroup>