我有一张照片，它显示一个覆盖时，悬停。
一切工作正常，但如果我beeing快速与鼠标（从顶部到底部的网页为例），覆盖将显示当我通过悬停的照片，但不会隐藏时，悬停完成。
以下是我尝试的：

• 不同的事件处理程序，如onMouseEnter和onMouseLeave，onMouseOver和onMouseOut，都带有onFocus和onBlur
• 条件CSS类：${!isHover && 'hidden'}

但总是得到同样的结果。
有什么想法可以改善这一点，使浏览器可以跟随状态的变化？
下面是简化的代码：

const Photo = (): JSX.Element => {
  const [isHover, setHover] = useState<boolean>(false);

  const LayoutFactory = (): JSX.Element => {
    switch (true) {
      case archived:
        return <ArchiveLayout />;
      case Boolean(photo):
        return isHover ? (
          <HoverLayout />
        ) : (
          <IconPlayOutline />
        );
      default:
        return <></>;
    }
  };

  const MissingImageFactory = (): JSX.Element => {
    if (archived) {
      return (
        <div>
          // CONTENT
        </div>
      );
    }

    return <MissingImage />;
  };

  const LayoutWrapper = ({ children }: PropsWithChildren): JSX.Element => {
    return (
      <div>
        {children}
      </div>
    );
  };

  const HoverLayout = (): JSX.Element => {
    return (
      <LayoutWrapper>
        // CONTENT
      </LayoutWrapper>
    );
  };

  const ArchiveLayout = (): JSX.Element => {
    return (
      <LayoutWrapper>
        <div>
          // CONTENT
        </div>
      </LayoutWrapper>
    );
  };

  const Image = (): JSX.Element => {
    return photo ? (
      <img
        alt="annonce"
        src={photo}
      />
    ) : (
      <MissingImageFactory />
    );
  };

  return (
    <button
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      {...props}
    >
      // CONTENT
    </button>
  );
};

export default Photo;