React CSSTransition с Route сначала отображает следующую страницу, а затем снова работает с отображением следующей страницы

Начиная с того состояния, в котором рендерится Products.

Я хочу, чтобы приведенный выше Products выходил с анимацией, а ProductDetailPhotos появлялся при нажатии NavLink to = {'/product-detail/' + variant.id}, который существует в представлении Products, однако сначала Products выше заменяется новым ProductDetailPhotos, а после него появляется новый другой ProductDetailPhotos.

<TransitionGroup component = "main" className = "page-main">
  <CSSTransition key = {location.pathname} timeout = {timeout} classNames = "fade" appear>
    <Switch location = {location}>
      <Route exact path = {'/'} component = { () =>
        <Products
          productsArray = {this.state.myProductsArray}
          client = {this.props.client}
        />
      }/>
      <Route path='/product-detail/:variantId' render = {props =>
        <ProductDetailPhotos
          products = {this.state.products}
          client = {this.props.client}
          addVariantToCart = {this.addVariantToCart}
          {...props}
        />
      }/>
      <Route component = {NotFoundPage} />
    </Switch>
  </CSSTransition>
</TransitionGroup>

Я объясняю фактические временные ряды, как показано ниже:

1. Products DOM визуализируется
2. Щелкните ссылку NavLink для / product-detail
3. Products DOM сразу же заменяется на ProductDetailPhotos 1 DOM с классами постепенного выхода, затем отображается ProductDetailPhotos 2 DOM с классами исчезновения
4. ProductDetailPhotos 1 DOM и ProductDetailPhotos 2 DOM запускают анимацию с помощью CSS. ProductDetailPhotos 1 DOM анимирует выход, а ProductDetailPhotos 2 DOM - вход.
5. ProductDetailPhotos 1 DOM окончательно исчезнет

Мои ожидания ниже:

1. Products DOM визуализируется
2. Щелкните ссылку NavLink для / product-detail
3. ProductDetailPhotos DOM сначала рендерится с классами постепенного появления
4. Затем Products DOM начинает анимацию для выхода с помощью CSS с классами постепенного выхода и ProductDetailPhotos DOM также с классами постепенного появления.

Спасибо.