React - Using react-transition-group TransitionGroup in Nested Routes

Question

I searched this issue but I could not find a solution with native react-transition-group.

I have 2 components Home and Order. I use route transition for these. Everything works fine for these flat routes.

<TransitionGroup component={null}>
        <CSSTransition
            key={props.locationKey}
            classNames={["route-slide"].join(' ')}
            timeout={{ enter: 1000, exit: 500 }}>
            <div>
            <Switch key={this.props.location.pathname} location={this.props.location}>
                <Route path="/home" component={Home} /> 
                <Route path="/order" component={Order} />
                <Route path="*" render={({ location }) => {
                                if (location.pathname === window.location.pathname) {
                                    return <Redirect to="/home" />;
                                }
                                return null;
                            }} />
.
.
.

I want to use route transition for sub routes in Home component. But always Home component is animated when I want to animate sub routes. You can find sub routes below.

<TransitionGroup component={null}>
            <CSSTransition
                key={props.locationKey}
                classNames={["route-slide"].join(' ')}
                timeout={{ enter: 1000, exit: 500 }}>
                <div>
                <Switch key={this.props.location.pathname} location={this.props.location}>
                    <Route path="/home" exact render={() => {
                                    return <Navigations/>;
                                }} />

                    <Route path="/home/:type" component={SomeComponentByType} />
                </Switch>
.
.
.

This is the image for Home Component.

How can I animate just sub routes?

Thanks for any helps