Почему мой переход не работает с элементом React? ⇐ CSS

[Anonymous]

У меня проблема с переходом, который отказывается работать. Я не понимаю, в чем проблема, я попробовал несколько комбинаций, но ничего не помогло.
Мой компонент React:

Код: Выделить всё

{productList.map((product) => (
[*]        key={product.id}
onClick={() => {setSelectedProduct(product)}}
className={
product.id === selectedProduct.id
? "current_item"
: "not_current_item"
}
>
{product.icon}
{product.title}

))}

Мой CSS:

Код: Выделить всё

export const Tab = styled.ul`
/* reset list */
list-style: none;
/* style */
display: flex;
flex-direction: column;
gap: 10px;
transition: width 1s ease-in-out;

&.reduce{width: 49px;}
&.expand{width: 300px;}

/* Styled li */
& li{
background-color: ${props => getColorSettings(props.theme).background};
border-radius: 10px;
display: inline-flex;
align-items: center;
gap: 15px;
padding: 15px 18px;
cursor: pointer;
transition: all .5s ease-in-out;
overflow: hidden;

&:hover{ background-color: ${props => getColorSettings(props.theme).background_secondary}; }

&.current_item{background-color: ${props => getColorSettings(props.theme).primary}; }

& svg{
flex-shrink: 0;
flex-grow: 0;
font-size: 1em;
}

& span{
flex-shrink: 0;
flex-grow: 0;
white-space: nowrap;
transition: opacity 0.5s ease-in-out;
}
}

Другой CSS на UL:


Логика состояния работает, но по умолчанию ложна и применяет класс .expand для нажатия кнопки, которую он переключает с помощью .reduce .
Отображение обновляется правильно, но переход

Код: Выделить всё

 transition: width 1s ease-in-out;

не хочет работать.
Заранее благодарю за ответ.

Подробнее здесь: https://stackoverflow.com/questions/781 ... ct-element