Coin Flip Animation. Doesn’t do the flip animation if it lands on the same face twice in a row

When the coin is on HEADS and the logic runs and determines that its HEADS again on the next flip the animation will not trigger because its dependent on a className changing and then having CSS take care of the animation. We are using state to change the className. I figured that setting the state to be null or something would work because technically the className is changing but maybe it runs to fast for the browser to notice?
Order of code should be: Flip Logic, JSX ClassName that changes, CSS for animation

    const flipCoin = () => {
    setCoin("");
    const random = Math.random();
    if (random < 0.5) {
      console.log(random);
      setCoin("heads");
      setHeadsCount(headsCount + 1);
    } else {
      console.log(random);
      setCoin("tails");
      setTailsCount(tailsCount + 1);
    }
  };

       <div className="coinContainer">
          <div id="coin" className={`animate-${coin}`}>
            <div id="heads" className="heads"></div>
            <div id="tails" className="tails"></div>
          </div>
        </div>

 .animate-heads {
  animation: flipHeads 3s;
  animation-fill-mode: forwards;
}

@keyframes flipHeads {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(1800deg);
  }
}

.tails {
    background-image: url(./assets/tails.jpg);
    transform: rotateY(-180deg);
}

.animate-tails {
  animation: flipTails 3s;
  animation-fill-mode: forwards;
} 

SO if anyone has an answer that would be amazing. Thank you for your time.