I am trying to make it so when I click a circle with the ">" character, it gets rotated around so that it turns into "<" with a nice animated transition

I have my code here with the 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>

and my css:

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

If I hover over, the char turns pink, but no rotation whatsoever

is it an issue with my css? with how react handles css transform? This would work fine in vanilla css/js/html