Animation react Does not reset - reactjs

Question

I am working on animation in React app. I need animation starts working after hover off the button, the animation only works one time and after that for next time hover off the button does not make animation works.
I used
setTimeout(()=> {
e.target.classList.add(classes.hide);
}, 1);
to reset time to works again but it does not work out.
#keyframes rotate-before {
0% { right:0px; top:0px;}
25% { right:40px; top:0px;}
50% {bottom:10px; top:178px;right:40px;}
}
.content {
position: absolute;
inset: 30px;
z-index: 3;
display: flex;
flex-direction:column;
align-items: center;
justify-content: center;
}
.content:hover .button{
padding: .8rem .1rem;
background-color: #00092C;
border:none;
border-radius: 50%;
cursor: pointer;
color: #fff;
visibility:visible;
position: relative;
}
.hover{
padding: .8rem .1rem;
background-color: #00092C;
border:none;
border-radius: 50%;
cursor: pointer;
color: #fff;
visibility:visible;
position: relative;
animation: rotate-before 0.5s linear;
animation-iteration-count: 1;
}
.content .button{
padding: .8rem .1rem;
background-color: #00092C;
border:none;
border-radius: 50%;
cursor: pointer;
color: #fff;
position: relative;
visibility:hidden;
}
.hide{
padding: .8rem .1rem;
background-color: #00092C;
border:none;
border-radius: 50%;
cursor: pointer;
color: #fff;
position: relative;
visibility:hidden;
}
.content img {
position: absolute;
width: 100%;
height:100%;
object-fit: cover;
}
import "./App.css";
import { AnimatePresence, motion, useTransform } from "framer-motion/dist/framer-motion";
import classes from "./components/anm.module.css";
function App() {
const [isHovered, setHovered] = useState(false);
const change = (e) => {
e.target.classList.add(classes.hover);
setTimeout(()=> {
e.target.classList.add(classes.hide);
}, 1);
};
return (
<div className={classes.box}>
<div className={classes.content}>
<img
src="https://budgetreno.ca/wp-content/uploads/Pylon-25_compressed-thegem-portfolio-metro.jpg"
alt=""
/>
<motion.div className="square" onHoverEnd={change} whileHover={{}}>
<button id="test" className={classes.button}>
Follow
</button>
</motion.div>
</div>
</div>
);
}
export default App;