title: Problem with useRef React Hook and event listener and change img src
body: <p>I'm trying to build a React Hook that will change image on mouseover event.  I've got the code below that does not work.  I was hoping I could add an event listener, then when the onmouseever event fires, change the image src attribute.  Here is the code that does not work.</p>
  
  <pre><code>import React, { useState, useEffect, useRef } from "react";
  
  const ImageToggler = ({ primaryImg, mouseOverImg }) =&gt; {
    const imageRef = useRef(null);
  
    function handleMouseOverHandler() {
      console.log("handleMouseOver");
      imageRef.current.src = mouseOverImg;
    }
  
    useEffect(() =&gt; {
      // THIS DOES NOT SEEM TO DO ANYTHING
      imageRef.current.addEventListener(
        "onmouseover",
        handleMouseOverHandler,
        true
      );
    }, []);
  
    return (
      &lt;img
        ref={imageRef}
        src={primaryImg}
        onMouseOver={() =&gt; {
          console.log("mouse over....");
        }}
        alt="image here"
      /&gt;
    );
  };
  
  export default ImageToggler;
  </code></pre>