Estoy tratando de hacer que cuando haga clic en un círculo con el carácter ">", se gire para que se convierta en "<" con una bonita transición animada.

Tengo mi código aquí con className='chevron-char'

 <div id="main" className={` super-animation super-animation ${showSideNav ? 'main-show' : ' '} `} > <button className="openbtn" onClick={sideNavClicked}> <a className='chevron-char' > > </a> </button> {children} </div>

y mi css:

 .chevron-char:hover{ color:pink; transform: rotate(80deg); transition: all 0.25s ease-in-out; }

Si paso el cursor por encima, el char se vuelve rosa, pero no hay rotación alguna.

¿Es un problema con mi css? ¿Con cómo reaccionar maneja la transformación css? Esto funcionaría bien en vanilla css/js/html