Не можете сделать задержку рендеринга в css-grid-анимации?

Я использую анимация-CSS-сетка и библиотеку React для создания своего портфолио в сеточном дизайне, я как бы добился того, что хотел, — это ссылка на перо. Но когда я нажимаю на любое из полей, текст, который должен идти вместе с полем, отображается мгновенно. Я хочу, чтобы он отображался после увеличения окна. это фрагмент кода, который я использую при рендеринге текста.

class Card extends React.Component {
state = { expanded: false };
randomNumber = Math.floor(Math.random() * 5) + 1;

render() {
    return (
        <div
            style = {{ backgroundColor: this.props.color }}
            class = {`card card--${this.randomNumber} ${
                this.state.expanded ? "card--expanded" : ""
                }`}
            onClick = {() => {
                this.setState({ expanded: !this.state.expanded });
            }}
        >{this.state.expanded ? <Text /> :
            (<div>

                {/* <div className = "card__avatar" />
                <div className = "card__title" /> */}
                <div className = "card__description"> 
   {this.props.subject}</div>
            </div>)}
        </div>
    );
  }
}

Я визуализирую компонент Текст в тот момент, когда он получает расширенное состояние true. Я не знаю, как это отсрочить. Библиотека animate-css-grid предоставляет пользовательскую конфигурацию, но я не могу понять, как ее использовать. Может ли кто-нибудь, кто знаком с анимацией CSS, помочь мне здесь, пожалуйста.