title: Show different image of hover in react
body: <p>I want to show different image on hover of div in react with usestate. Issue is when i hover on single image then all images changed. How to handle this issue. Screenshots of hover result are attached</p>
  <pre><code>const [open, setOpen] = useState(false);
  
  &lt;div className=&quot;container-fluid&quot; id=&quot;companies&quot;&gt;
    &lt;div className=&quot;row&quot;&gt;
      &lt;div className=&quot;col-md-3 p-0&quot;&gt;
        &lt;div className=&quot;company-block&quot; onMouseOver={() =&gt; setOpen(true)} onMouseOut={() =&gt; setOpen(false)}&gt;
          &lt;Image src={open ? BlockFiBlack : BlockFiWhite}/&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div className=&quot;col-md-3 p-0&quot;&gt;
        &lt;div className=&quot;company-block&quot; onMouseOver={() =&gt; setOpen(true)} onMouseOut={() =&gt; setOpen(false)}&gt;
          &lt;Image src={open ? NerdWalletBlack : NerdWalletWhite}/&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div className=&quot;col-md-3 p-0&quot;&gt;
        &lt;div className=&quot;company-block&quot; onMouseOver={() =&gt; setOpen(true)} onMouseOut={() =&gt; setOpen(false)}&gt;
          &lt;Image src={open ? SuperRateBlack : SuperRateWhite}/&gt;
        &lt;/div&gt;
       &lt;/div&gt;
       &lt;div className=&quot;col-md-3 p-0&quot;&gt;
         &lt;div className=&quot;company-block&quot; onMouseOver={() =&gt; setOpen(true)} onMouseOut={() =&gt; setOpen(false)}&gt;
            &lt;Image src={open ? XealBlack : XealWhite}/&gt;
          &lt;/div&gt;
       &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/K02mJ.png" rel="nofollow noreferrer">Before div hover result</a>
  <a href="https://i.stack.imgur.com/ohBvA.png" rel="nofollow noreferrer">After div hover result</a></p>