title: Change image when hover in Reactjs
body: <p>I'm practicing Reactjs, I'm currently working on hover for icons
  But I have an error when hovering is that the image cannot be displayed
  This is my code
  <code>index.js</code></p>
  <pre><code>import React from 'react';
  import '../contact/index.css';
  enter code here`import {Row, Col, Image} from 'react-bootstrap';
  
  import PhoneIcon from '../../../assets/icon/phone.png';
  import EmailIcon from '../../../assets/icon/mail.png';
  import LocationIcon from '../../../assets/icon/location.png';
  import FBIcon from '../../../assets/icon/facebook.png';
  import YoutubeIcon from '../../../assets/icon/youtube.png';
  import GoogleIcon from '../../../assets/icon/google.png';
  import FBHover from '../../../assets/icon/fb-hover.png';
  import YoutubeHover from '../../../assets/icon/YTHover.png';
  import GoogleHover from '../../../assets/icon/google-hover.png';
  
  const Contact = () =&gt; {
      return (
        &lt;Col className=&quot;fc-item&quot;&gt;
          &lt;h4 className=&quot;fc-title&quot;&gt;Contact&lt;/h4&gt;
          &lt;div className=&quot;fc-description&quot;&gt;
            &lt;p&gt;
              &lt;Image className=&quot;contact-icon mail&quot; src = {EmailIcon}/&gt;
              gokymilktea@gmail.com
            &lt;/p&gt;
  
            &lt;p&gt;
              &lt;Image className=&quot;contact-icon location&quot; src = {LocationIcon}/&gt; 
              101B Le Huu Trac, Son Tra
            &lt;/p&gt;
  
            &lt;p&gt;
              &lt;Image className=&quot;contact-icon phone&quot; src = {PhoneIcon}/&gt; 
              (+84) 336 492 501
            &lt;/p&gt;
  
            &lt;p&gt;
              &lt;Image className=&quot;social-icon&quot; src = {FBIcon}
                onMouseOver={e =&gt; (e.currentTarget.src = {FBHover})}
                onMouseOut={e =&gt; (e.currentTarget.src = {FBIcon})} 
              /&gt;
              &lt;Image className=&quot;social-icon mg&quot; src = {YoutubeIcon}
                onMouseOver={e =&gt; (e.currentTarget.src = {YoutubeHover})}
                onMouseOut={e =&gt; (e.currentTarget.src = {YoutubeIcon})} 
              /&gt;
              &lt;Image className=&quot;social-icon&quot; src = {GoogleIcon}
                onMouseOver={e =&gt; (e.currentTarget.src = {GoogleHover})}
                onMouseOut={e =&gt; (e.currentTarget.src = {GoogleIcon})} 
              /&gt;
            &lt;/p&gt;
          &lt;/div&gt;
        &lt;/Col&gt;
      );
    }
    
    export default Contact
  </code></pre>
  <p>And this is an error when I hover
  <a href="https://i.stack.imgur.com/XatVL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XatVL.png" alt="enter image description here" /></a></p>
  <p>I need your help,Thanks for spend your time to see my question</p>