Integrate interactive map with React

I want to have an interactive map in an idlegame where you can click on a tile (See screenshot) and something should happen. I am trying to do so with an SVG and paths around the tile. Please tell me if there is a better way to implement something like this.

To my problem: I have finally got my Map-Component to work containing the whole SVG. My two paths (polygon on image) are implemented as follows:

<g>
   <path id="Mine" fill="#000" fillOpacity="0.6" d="M987 204 L937 231 L937 282 L988 305 L1039 282 L1040 226" onClick={console.log('City clicked')} />
</g>

Problem: The onclick event is triggerd when the page is loading and not when the polygon is clicked on. Does react even support that?

Thanks in advance!

Answer

On click should be a function: onClick={() => console.log(‘City clicked’)}