Слишком быстрое перемещение мыши не вызывает OnMouseLeave и не переворачивает карты React.

Question

У меня есть раздел, где есть куча реагирующих карт, которые переворачиваются, каждая карта переворачивается индивидуально на MouseEnter, а onMouseLeave переворачивается назад, проблема возникает, когда вы слишком быстро двигаете мышью. Если вы слишком быстро отходите от карты после того, как карта перевернулась на MouseEnter, она останется перевернутой и не перевернется, как должно. Есть ли способ заставить его надежно переворачивать карты, когда пользователь больше не наведет курсор на карту? Это то, что у меня есть сейчас, просто к сведению, что данные для карточек извлекаются из отдельного файла JSON с именем data.json. Это работает не только с быстрыми движениями мыши.

import React from "react";
import ReactCardFlip from "react-card-flip";
import { CardTitle } from "react-mdl";
import Data from "./data.json";

const Card = ({ card }) => {
  const [isFlipped, setIsFlipped] = React.useState(false);
  const handleClick = () => {
    setIsFlipped(!isFlipped);
  };
  
  return (
    <ReactCardFlip className="site-card" isFlipped={isFlipped} flipDirection="horizontal">
      <CardTitle
        style={{background: `url(${card.image}) center / cover , #FFF`,
      }}
        onClick={handleClick}
        onMouseEnter={() => setIsFlipped((prev) => !prev)}
        className="CardFront cardStyleFront"
      >
      </CardTitle>
      <CardTitle
        onClick={handleClick}
        onMouseLeave={() => setIsFlipped((prev) => !prev)}
        className="CardBack cardStyleBack"
      >
        <div className="card-detail">
        <h2>{card.title}</h2>
        <p>{card.description}</p>
        <a className="button" href={card.link} target='_blank'><span>View</span></a>
        </div>
      </CardTitle>
    </ReactCardFlip>
  );
};

const Cards = () => {

  return (
    <div className= "header">
      <h2>Cards</h2>
      <div className= "sites-worked-on">
        
        {Data.map((item, index) => (
          <Card card={item} key={`card-${index}`} shadow={0} style={{margin: 'auto'}}/>
        ))}
      </div>
    </div>
  );
};

export default Cards;