smooth animation of the size of a functional component during state change

Question

As you can see, by clicking on the component underneath, we can change its size. I would like to make a transition between those sizes. Is it possible with CSSTransition ?

export const Liste_planete2 = () => {
    const [height, setHeight] = useState<number>(30)

    const handleClick=()=>{
            setHeight(height+30)
    }
    return(
        <div style={{height:height}} onClick={handleClick}>
            Text
        </div>
    )
}

Answer 1

Try it:

export const Liste_planete2 = () => {
    const [height, setHeight] = useState<number>(30)

    const handleClick=()=>{
            setHeight(height+30)
    }
    return(
        <div style={{height:height, transition: "all 0.5s"}} onClick={handleClick}>
            Text
        </div>
    )
}