我正在尝试构建一个 React Hook，它将在鼠标悬停事件时更改图像。我有下面的代码不起作用。我希望我可以添加一个事件侦听器，然后当 onmouseever 事件触发时，更改图像 src 属性。这是不起作用的代码。

import React, { useState, useEffect, useRef } from "react";

const ImageToggler = ({ primaryImg, mouseOverImg }) => {
  const imageRef = useRef(null);

  function handleMouseOverHandler() {
    console.log("handleMouseOver");
    imageRef.current.src = mouseOverImg;
  }

  useEffect(() => {
    // THIS DOES NOT SEEM TO DO ANYTHING
    imageRef.current.addEventListener(
      "onmouseover",
      handleMouseOverHandler,
      true
    );
  }, []);

  return (
    <img
      ref={imageRef}
      src={primaryImg}
      onMouseOver={() => {
        console.log("mouse over....");
      }}
      alt="image here"
    />
  );
};

export default ImageToggler;