Javascript 将鼠标悬停在按钮上时，使按钮内的材质图标旋转（使用动画）

我正在使用ReactJS、MaterialUI和样式化组件进行样式化。我怎样才能使它旋转到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>

const TheArrowLeft=styled（ArrowForwardIcon）`
溢出：隐藏；
过渡时间：0.8s；
过渡性质：变换；
`
const TheArrowDown=styled（箭头前进图标）`
变换：旋转（90度）；
-webkit变换：旋转（90度）；
`
在我的组件函数中：
const[hover，setHover]=useState（false）；
const hoverOn=（）=>{setHover（true）}
const hoverOff=（）=>{setHover（false）}
我的按钮：
开始游览

它本身已经旋转了，但我无法使旋转成为动画，它只是立即切换任何想法