Animation react Does not reset

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;