React + Redux : How to manage transitions when replacing components - reactjs

Question

I use redux in my react app to dynamically swap components in and out of the DOM. What I'm trying to do is have css transitions happen that fade in and fade out these components.
I thought I could use the CSSTransitionGroup component for that, but as both the entering and leaving components are in the DOM at the same time (new component is mounted while the previous component is still not unmounted), it messes up the layout during these transitions.
I can get either the fade in or fade out to work by not displaying the entering or leaving component, and I played around with css absolute positioning to put one in front of the other during the transition, but both have unwanted side effects.
How does one properly replace one component with another and use transitions on both entering and leaving?
Thanks!
See my component code below just for understanding how I dynamically replace the components using redux.
Component code:
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import Services from '../components/services';
import About from '../components/about';
import Contact from '../components/contact';
import { connect } from 'react-redux';
import { selectDetail } from '../actions/index';
import { CSSTransitionGroup } from 'react-transition-group'
class Category extends Component {
constructor(props){
super(props);
this.handleDetailSelected = this.handleDetailSelected.bind(this);
}
getSelectedCategory(){
switch (this.props.selectedCategory) {
case 'about':
return <About key={ this.props.selectedCategory } handleDetailSelected={this.handleDetailSelected}/>;
case 'contact':
return <Contact key={ this.props.selectedCategory } handleDetailSelected={this.handleDetailSelected}/>;
default:
return <Services key={ this.props.selectedCategory } handleDetailSelected={this.handleDetailSelected}/>;
}
}
handleDetailSelected(event, detail){
if(detail){
this.props.selectDetail(detail);
}
}
render() {
const category = this.getSelectedCategory();
return (
<CSSTransitionGroup
className="col-xs-12 col-sm-6 content left-content"
component="div"
transitionAppear={true}
transitionAppearTimeout={ 1000 }
transitionName = "category"
transitionEnterTimeout={ 1000 }
transitionLeaveTimeout={ 500 }>
{ category }
</CSSTransitionGroup>
);
}
}
//selectedCategory is set through a navigation component.
function mapStateToProps({ selectedCategory }) {
return { selectedCategory };
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({
selectDetail
}, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(Category);