How can I change icon inside button on hover using chakra-ui and vanilla-extract?

• I am using nextjs13, chakra-ui, and vanilla-extract

Does anyone know how to change icon and text inside button on hover, using chakra-ui and vanilla-extract?

I have a button like this:

<Button >
 <svg width="16" height="18">
  <use xlinkHref={path/to/iconA}></use>
 </svg>
{!isFollowing ? <span>follow</span> : <span>following</span>}
</Button>

I want to show 'follow' button with icon A if logged in user is not following the user.
I want to show "following" with icon A if logged in user is following the user.

When I hover the button(and logged in user is currently following the user), I want to change button text: from "following" to "unfollow" with red text color and icon: from iconA to iconB.

I could change the text color by adding css to span: <span className={textCss}>following</span>

const textCss = style({
":hover":{
color:"red"
}})

but not sure how to change the text and icon.

I solved issue by adding 'isHover' as state variable.

const [isHover, setIsHover] = useState(false);

<Button onMouseEnter={() => setIsHover(true)}
        onMouseLeave={() => setIsHover(false)}>
 <svg width="16" height="18">
  <use xlinkHref={ !isFollowing && isHover? path/to/iconB: path/to/iconA}> 
  </use>
 </svg>
 {!isFollowing ? <span>follow</span> : <span>following</span>}
</Button>