title: When I hove on element coming from mapped list , only one object change
body: <p>I have this arrays of objects that has the data in it</p>
  <pre><code>const teamSliderContent = [
      {
          Describtion1 : &quot;Chef. Mordy Wenk&quot;,
           Title : &quot;Head of the Chief staff.&quot;,
          Img : &quot;https://user-images.githubusercontent.com/86873404/167750109-5c3dec09-3631-47ae-8823-9625ba9e904f.jpg&quot;,
          id : 1
      },{
          Describtion1 : &quot;Chef. Mark Brunnett&quot;,
           Title : &quot;Junior chef.&quot;,
           Img : &quot;https://user-images.githubusercontent.com/86873404/167750117-aa571b55-6e9e-4850-933d-ad357be73176.jpg&quot;,
         
          id: 2
      }]
  </code></pre>
  <p>In my code , I have a small icon that pop up when I hover on the Image</p>
  <pre><code>&lt;InfoIcon style={iconMove} transition={&quot;0.4s&quot;} color=&quot;#46111D&quot;
                          transform={&quot;translate(-25px , 25px)&quot;} fontSize={30} /&gt;
  </code></pre>
  <p>, so I'm achieving that with this code :</p>
  <pre><code>const [iconMove, setIconMove] = useState({transform:&quot;translate(-25px , 25px)&quot;})
  
                       &lt;Image
                          onMouseEnter={e =&gt; {
                              setIconMove({transform:&quot;translate(25px,-25px)&quot;})
                          }}
                          onMouseLeave={e =&gt; {
                          setIconMove({transform:&quot;translate(-25px , 25px)&quot;})
                            }} src={item.Img} /&gt;
  </code></pre>
  <p>and that is done because I have OverFlow as hidden in the container of the image,
  so my problem is that when I hover on any Image of these , all icons pop up at the same time,
  how can I make it so only when I hover on certain image the icon of this only image pop up?
  I know that It's related to the id of each object but still I can't figure out how to do it.
  I hope my question was clear and simple</p>