Как упростить функции событий в React DOM Listeners

Question

У меня есть следующий код, который объявляет слушателя для мыши в и из изображения.Я делаю это с именованной функцией, а не с простой лямдой, чтобы я мог нести ссылку, а затем удалить слушателя при удалении компонента.

Есть ли короткий способ получитьСсылка на обработчики проще, чем я делаю здесь ?Я надеюсь, что у меня не должно быть явного определения функций, подобных этому.Я предпочитаю оставить определение функции внутри добавления события, если это возможно.

Это похоже на церемонию, я надеюсь, что смогу сократить ее.

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

  const handleMouseOverHandler = () => {
    imageRef.current.src = mouseOverImg;
  };

  const handleMouseOutHandler = () => {
    imageRef.current.src = primaryImg;
  };

  useEffect(() => {
    imageRef.current.addEventListener(
      "mouseover",
      handleMouseOverHandler,
      true
    );
    imageRef.current.addEventListener("mouseout", handleMouseOutHandler, true);
    return () => {
      imageRef.current.removeEventListener(
        "mouseover",
        handleMouseOverHandler,
        false
      );
      imageRef.current.removeEventListener(
        "mouseout",
        handleMouseOutHandler,
        false
      );
    };
  }, []);