React: changing icon on mouseEnter using state. Icon stuck on "hover" state if I move the mouse too fast

Question

I have a component with an unchecked checkbox icon. When hovering over the icon, I am displaying a checked version of the icon. I am using state to set the isHovered state to true when the mouse enters the div that contains the icon and to false when the mouse leaves the div. I do a conditional rendering in the div, using an unchecked icon if the isHovered state is false and a checked icon if isHovered is true.

My component is used multiple times in a row in my app and my issue is that if I move my mouse fast over the icons, some of them get stuck in the isHovered state true even if the mouse is not over them anymore.

Any suggestions to fix this behavior ?

Here is my code:

const [isHovered, setIsHovered] = useState(false);

  const onMouseEnter = () => {
    setIsHovered(true);
  };
  const onMouseLeave = () => {
    setIsHovered(false);
  };

  return (

        <div
          onMouseEnter={onMouseEnter}
          onMouseLeave={onMouseLeave}
          onClick={handleArchive}
          style={{ display: "flex", alignItems: "center", cursor: "pointer" }}
        >
          {isHovered ? (
            <CheckCircleIcon
              style={{ color: "grey", fontSize: 20, marginRight: 10 }}
            />
          ) : (
            <RadioButtonUncheckedIcon
              style={{ color: "grey", fontSize: 20, marginRight: 10 }}
            />
          )}
        </div>
    

Answer 1

Solution 1:

const [isHovered, setIsHovered] = useState(false);
 
  return (

        <div
          onMouseEnter={() => setIsHovered(!isHovered)}
          onMouseLeave={() => setIsHovered(!isHovered)}
          onClick={handleArchive}
          style={{ display: "flex", alignItems: "center", cursor: "pointer" }}
        >
          {isHovered ? (
            <CheckCircleIcon
              style={{ color: "grey", fontSize: 20, marginRight: 10 }}
            />
          ) : (
            <RadioButtonUncheckedIcon
              style={{ color: "grey", fontSize: 20, marginRight: 10 }}
            />
          )}
        </div>

Solution 2: A simple css-only solution