悬停在按钮上时，使我的materialUI图标旋转（带有动画）

Question

我正在使用ReactJS，MaterialUI和Styled组件进行样式设计。我如何通过动画将其旋转到90度，因为切换本身已经可以完成。

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>

就其本身而言，它已经旋转了，但是我不能使旋转动画化，它只是立即切换任何想法？