Реагировать js Сиденав, открывая анимационный глюк

Question

В своем веб-приложении реагирования я создаю собственный компонент SideNav. Когда я открываю, у него есть сбой, а в нем длинный текст. Например Analytics имеет глюк. Как я могу решить эту проблему?

SideNavItem компонент ниже;

render() {
    const {text, isOpened, icon} = this.props;

    return (
        <div className={'sidenav-item'}>
            <div className={'sidenav-icon-container'}>
                <img className={'sidenav-icon'} src={icon} alt={'icon'} />
            </div>
            <div className={'sidenav-text-container'}>
                {isOpened ? <p className={'sidenav-item-text'}>{text.toUpperCase()}</p> : null }
            </div>
        </div>
    );
}

.sideNavItem.css ниже;

/*Components Style*/
 .sidenav-item {
     display: flex;
     align-items: center;
     height: 50px;
     margin-top: 8px;
     width: 100%;
     border-right: 4px solid transparent;
}
 .sidenav-icon-container{
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 8px 0;
     width: 80px;
}
 .sidenav-icon {
     height: 25px;
     width: 25px;
     object-fit: contain;
}
 .sidenav-item:hover {
     border-right: 4px solid lightcyan;
}
 .sidenav-text-container {
     height: 100%;
     display: flex;
     align-items: center;
}
 .sidenav-item-text {
     display: flex;
     align-items: center;
     color: white;
     font-size: 14px;
}

Ниже вы можете увидеть Analytics глюк в GIF, как я могу сделать его стабильным?

}