Google maps marker delete function not invoked in ReactJS

I am trying to implement custom markers on google maps in my ReactJS application. Now that I got the markers, I would like to have an option to delete them. This is the code for placing and deleting markers. However, when I click on the delete button in the info window, nothing seems to happen.

  addInfoWindow(marker, message, map) {
    var infoWindow = new google.maps.InfoWindow({
      content: message
    });

    google.maps.event.addListener(marker, "click", function() {
      infoWindow.open(map, marker);
    });
  }

  deleteMarker() {
    console.log('Delete');
  }

  placeMarker = (map, location) => {
    let marker = new google.maps.Marker({
      position: location,
      map: map,
      icon: red_flag
    });

    var contentString =
      '<button type="button" class="btn btn-danger" onClick="' +
      this.deleteMarker +
      '">Delete</button>';

    this.addInfoWindow(marker, contentString, map);
  };

I also tried with;

deleteMarker = () => {
    console.log('Delete');
}

When I click on the button, the method is not getting invoked and no errors on console. What could be wrong with this code? The generated HTML code for this content string is;

<button type="button" class="btn btn-danger" onclick="function () {
      console.log('Delete');
    }">Delete</button>

To clarify further, I would like to have the string for delete button behave like this;

<button type="button" class="btn btn-danger" onClick={() => this.deleteMarker("param")}>
    Delete
</button>

deleteMarker = param => {
    console.log("Delete", param);
};