React transition group: не работает исчезание-появление элемента

Я новичок в react transition group. Мне нужно организовать появление-исчезание элементов внутри div в определенные моменты, пока этот div меняет размеры. Например, началась анимация раскрытия div - внутри он должен оставаться пустым. По завершении анимации внутри должно появляться содержимое (в моем примере это h2 и p). Соответственно, в обратную сторону, содержимое исчезает сразу. За старт анимаций отвечает булевое значение isOpen. Но сейчас переход не работает. Все действует так, как обычно: при старте анимации сразу появляется текст. Можете посмотреть код и объяснить, что я делаю не так?

<div 
        className="info"
        onClick={(e) => e.stopPropagation()}
      >
        {
          isOpen && <Transition
            in={isOpen}
            timeout={200}
          >
            {state => <div className={`info__text ${state}`}>
              <h2>{getHeading()}</h2>
              <p>{getText()}</p>
            </div>}
          </Transition>
        }
          <img 
            src={myImg} 
            alt='i'
            onClick={handleClick}
            onMouseOver={handleMouseOver}
            onMouseOut={handleMouseOut}
          />
      </div> 

CSS

.info {
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid #D9D9D9;
    border-radius: 16px;
    width: ${props => props.isOpen ? '400px' : '56px'};
    height: ${props => props.isOpen ? 'auto' : '56px'};
    position: absolute;
    right: 0;
    transition: 0.4s ease;

    img {
      width: 24px;
      position: absolute;
      top: 16px;
      right: 16px;
      cursor: pointer;
    }

    p {
      font-style: italic;
      margin-top: 10px;
      user-select: text;
    }
    
    .info__text .entering {
      display: none;
    }

    .info__text .entered {
      display: block;
    }

    .info__text .exiting {
      display: none;
    }

    .info__text .exited {
      display: none;
    }
  }