Why isn't my transition working on a React element?

Question

I have a problem with a transition which refuses to work. I don't see where the problem is, and I've tried several combinations but nothing worked.

My React component:

<styled.Tab className={reduceNav ? "reduce" : "expand"}>
{productList.map((product) => (
    <li
        key={product.id}
        onClick={() => {setSelectedProduct(product)}}
        className={
            product.id === selectedProduct.id
                ? "current_item"
                : "not_current_item"
        }
    >
        {product.icon}
        <span>{product.title}</span>
    </li>
))}
</styled.Tab>

My 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;
    }
}

Other CSS on UL:

The logic of the state works, but is false by default, and applies the class .expand to click on a button it switches with .reduce.

The display updates correctly, but the transition

 transition: width 1s ease-in-out;

does not want to work.

Thank you in advance for your answer.