Как сделать два TransitionGroup в одном компоненте React?

Question

[Нина]

Здравствуйте.
Изучаю React и пытаюсь разобраться с React Transition Group. Хочу сделать, чтобы анимировались одновременно количество заказанных бургеров и их сумма. Но одновременно не получается, - либо анимируется количество, либо только сумма. Подскажите, возможно ли это? Вот код:

import React from "react";
import Shipment from "./Shipment";
import { TransitionGroup, CSSTransition } from "react-transition-group";

class Order extends React.Component {

  renderOrder = (key) => {
    const burger = this.props.burgers[ key ];
    const count = this.props.order[ key ];
    const isAvailable = burger && burger.status === "available";
    const transitionsStyles = {
      classNames: "order",
      key,
      timeout: { enter: 500, exit: 500 }
    };

    if( isAvailable ) {
      return <CSSTransition
        { ...transitionsStyles }>
        <li key={ key }>
        <span>
          <TransitionGroup component="span" className="count">
            <CSSTransition classNames="count" key={ count } timeout={ { enter: 500, exit: 500 } }>
                <span>{ count } </span>
              </CSSTransition>
          </TransitionGroup>
            шт. { burger.name }
          <TransitionGroup component="span" className="price">
            <CSSTransition
              classNames="price"
              timeout={ { enter: 500, exit: 500 } }>
            <span> { count * burger.price } ₽</span>
            </CSSTransition>
    </TransitionGroup>
      <button className="cancellItem" onClick={ () => {
        this.props.deleteFromOrder( key );
      } }> &times;</button>;
    </span>
        </li>
      </CSSTransition>;

    }
    return <CSSTransition { ...transitionsStyles }      >
      <li className="unavailable" key={ key }>Извините, { burger ? burger.name : "бургер" } временно
        недоступен
      </li>
      ;
    </CSSTransition>;
  };

  render() {
    const orderIds = Object.keys( this.props.order );
    const total = orderIds.reduce( (prevTotal, key) => {
      const burger = this.props.burgers[ key ];
      const count = this.props.order[ key ];
      const isAvailable = burger && burger.status === "available";
      if( isAvailable ) {
        return prevTotal + burger.price * count;
      }
      return prevTotal;
    }, 0 );

    return (
      <div>
        <h2>Ваш заказ</h2>
        <TransitionGroup component="ul" className="order">
          { orderIds.map( this.renderOrder ) }
        </TransitionGroup>
        { total > 0 ? ( <Shipment total={ total }/> ) : (
          <div className="nothingSelected">Выберите блюдо и нажмите на кнопку 'Заказать'</div> ) }
      </div>
    );
  }
}

export default Order;

Ссылка на gitHub