I have a component that is changing classes every render in order to animate that component depending on its state with Tailwind:

import { useState, useEffect, useRef } from 'react'

export default function LeftToolbox() {
    const [isOut, setIsOut] = useState(true)
    const [classNames, setClassNames] = useState('hover:animate-slideIn h-full w-14 position absolute bg-red-800' +
        ' left-0 z-40')

    useEffect( () => {
        isOut && setClassNames('hover:animate-slideIn h-full w-14 position absolute bg-red-800 left-0 z-40')

        !isOut && setClassNames('hover:animate-slideOut h-full w-14 position absolute bg-red-800 left-0 z-40')
    },  [isOut])
    return (
        <div
             onMouseEnter={() => setIsOut(false)}
             onMouseLeave={() => setIsOut(true)}
             className={classNames}></div>
    )
}

The component's classes change appropriately, according to onMouseEnter and onMouseLeave, but the actual animation it self does not work