How to implement react-transition-group?

import React from 'react';
import { Route, Switch, withRouter } from 'react-router-dom';
import { TransitionGroup, Transition } from 'react-transition-group';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Landing from '../../pages/Landing/Landing';
import Example from '../../pages/Example/Example.js';
import { AsyncNotFound, AsyncAbout } from '../../util/async-section-handler';

import './Pages.css';

import checkProps from '../../util/check-props';

const duration = 300;

const defaultStyle = {
  transition: 'opacity ${duration}ms ease-in-out',
  opacity: 0
};

const transitionStyles = {
  entering: { opacity: 0 },
  entered: { opacity: 1 }
};

class Pages extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = { in: false };
  }

  // toggleEnterState = () => {};

  componentDidMount() {
    this.setState({ in: true });
  }

  componentWillReceiveProps(nextProps) {}

  render() {
    return (
      <main className={classnames('Pages', this.props.className)} role="main">
        <TransitionGroup>
          <Transition in={this.state.in} timeout={duration}>
            {state => (
              <div
                style={{
                  ...defaultStyle,
                  ...transitionStyles[state]
                }}
              >
                <Switch location={this.props.location}>
                  <Route exact={true} path="/" component={Landing} />
                  <Route exact={true} path="/about" component={AsyncAbout} />
                  <Route exact={true} path="/example" component={Example} />
                  <Route component={AsyncNotFound} />
                </Switch>
              </div>
            )}
          </Transition>
        </TransitionGroup>
      </main>
    );
  }
}

Pages.propTypes = checkProps({
  className: PropTypes.string
});

Pages.defaultProps = {
  className: ''
};

export default withRouter(Pages);