Make my materialUI Icon inside my button rotate when hovering over it (with animaton)

I am using ReactJS, MaterialUI and Styled components for styling. How am I able to make it rotate to 90deg with an animation because the switching itself I am already able to do.

const TheArrowLeft = styled(ArrowForwardIcon)`
    overflow: hidden;
    transition-duration: 0.8s;
    transition-property: transform;
`

const TheArrowDown = styled(ArrowForwardIcon)`
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
`

inside my component function:
const [hover, setHover] = useState(false);
    const hoverOn = () => {setHover(true)}
    const hoverOff = () => {setHover(false)}

my button:
<MoreButton variant="outlined" size="large" href="#about-me" onMouseEnter={hoverOn} 
                    onMouseLeave={hoverOff} endIcon={hover ? (<TheArrowDown/>):(<TheArrowLeft/>)}>
                        Start Tour 
                    </MoreButton>

By itself it already rotates but I am not able to make the rotation be animated it just switches instantly any ideas ?