我正在用react和tailwindcss创建一个网页新闻应用，页面标题如下图所示（图片和文字是随机选择的）：

当我将鼠标悬停在div上时，图像应该会放大，同时根据isMouseIn布尔值更改悬停状态并设置缩放比例。但问题是，它有时工作，但有时不工作。我试着检查状态值，它工作得很好。设置值时没有任何问题，但第一次进入页面时无法缩放。如果在代码中手动刷新页面或更改缩放比例，那么它就可以工作，否则就不行，这是react的bug还是我做错了什么？
查看下面的代码，以便更好地理解我的实现：

export default function Headline() {
  /*
   *
   *  green border --> the whole component
   *  orange border --> div that is darkening the whole component
   */

  const [isMouseIn, setMousePos] = useState(false);
  function mouseEnter() {
    setMousePos(true);
  }
  function mouseLeave() {
    setMousePos(false);
  }

  return (
    <div
      onMouseEnter={() => mouseEnter()}
      onMouseLeave={() => mouseLeave()}
      className="mb-[.1em] overflow-hidden 950:rounded-xl cursor-pointer w-[100%] h-[300px] 380:h-[400px] 1215:h-[500px]  max-h-[500px] relative shadow-2xl"
    >
      <img
        src={headline}
        className={`w-full scale-${
          isMouseIn ? "150" : "100"
        } object-cover transition-all duration-700 h-full max-h-full absolute`}
      />
.
.
.
.
.