React & CSS - Mobile how to remove hover persist after state update

Question

I have setup a code sandbox, but I advise copying the code locally and f12 displaying on the mobile setting to demonstrate this issue.

https://codesandbox.io/s/amazing-grass-h2bcbn?file=/src/App.css

On a mobile view, When I hover an answer, it will apply hover.

When an answer is clicked, it will continue to persist the hover into the next question and set of answers, which is very inconvenient for selecting a new answer as it will show it as selected despite nothing being clicked.

.small-scale {
  transition: transform 0.6s; /* Animation off */
  transform: scale(1);
}
.small-scale:hover {
  transition: transform 0.6s; /* Animation */
  transform: scale(1.04);
}

.quiz-container .button-quiz:hover {
  border: white;
}