JSFiddle - React, Tailwind, and code Playground

HTML

<div id="map"></div>
<div id="over"></div>
<script>
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
    
    google.maps.event.addListener(map, "click", (e) => {
    	console.log("mapClick")
    })
  
    var MapOverlay = function (map) {
      this.map = map
      this.setMap(map)
    }
    MapOverlay.prototype = new google.maps.OverlayView()

    MapOverlay.prototype.onAdd = function () {
      var panes = this.getPanes()
      var layer = panes.overlayMouseTarget
      var div = document.createElement("div")
      div.className = "over"
      layer.appendChild(div)
      
      google.maps.event.addDomListener(div, "click", e => {
	      console.log("over click")
        e.stopPropagation()
      })
    }
    MapOverlay.prototype.draw = function () {
      //Do nothing, but it has to be here
    }

    MapOverlay.prototype.onRemove = function () {
      //Do nothing, but it has to be here
    }
    
    new MapOverlay(map)
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
        async defer></script>

CSS

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}

.over {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: red;
  left: 100px;
  top: 100px;
}