React ant design - how to correctly show images and intercat with them in loop

I am creating this application where I need to display an available tree on google Maps, when the user clicks on that image it will trigger a popover and change color. Here is my actual code:

<GoogleMapReact
     bootstrapURLKeys={{ key: "API KEY" }}
     defaultCenter={defaultProps.center}
     defaultZoom={defaultProps.zoom}>
                            
{takenTreeDedications.map(takenTree =>
    <Image key={takenTree.id} src='/tree-landmark-taken.svg' preview={false}
         lat={takenTree.column_values[9].text}
         lng={takenTree.column_values[10].text}
         width='2rem'
         onClick={() => showTreeDetails(takenTree)}
    >
    </Image> 
  )}
</GoogleMapReact>

This is displayed like this:

That is working well, I click on any of the images and I can see in console info about that tree.

Problems begin when I add that Popover.

Here is the code:

<GoogleMapReact
     bootstrapURLKeys={{ key: "AIzaSyBY6abK-3C6XQsMzroaNI8tc-OdVhtr_jo" }}
     defaultCenter={defaultProps.center}
     defaultZoom={defaultProps.zoom}>

{takenTreeDedications.map(takenTree =>
<Popover content={content} title="Title" trigger="click">
    <Image key={takenTree.id} src='/tree-landmark-taken.svg' preview={false}
         lat={takenTree.column_values[9].text}
         lng={takenTree.column_values[10].text}
         width='2rem'
         onClick={() => showTreeDetails(takenTree)}
    >
    </Image> 
   </Popover>
  )}
</GoogleMapReact>

And here is what happened after I added popover:

But when I click on any of this Images, Popover triggers and I have correct values.

How can I fix this? I need the images to be displayed in their current position as on screen 1, but with a working popover.

I tried everything I could. I am new to react.