How to add a button in infowindow with google-maps-react?

The way how InfoWindow component is implemented in google-maps-react library does not support to attach event handlers to info window dynamic content. The similar issue has been discussed in this thread.

The solution would be render InfoWindow children into a DOM node in order to prevent losing the React context, the following component could be introduced for that matter:

export default class InfoWindowEx extends Component {
  constructor(props) {
    super(props);
    this.infoWindowRef = React.createRef();
    this.contentElement = document.createElement(`div`);
  }

  componentDidUpdate(prevProps) {
    if (this.props.children !== prevProps.children) {
      ReactDOM.render(
        React.Children.only(this.props.children),
        this.contentElement
      );
      this.infoWindowRef.current.infowindow.setContent(this.contentElement);
    }
  }

  render() {
    return <InfoWindow ref={this.infoWindowRef} {...this.props} />;
  }
}

Now once InfoWindow replaced with InfoWindowEx event handlers could be attached to Component children:

<InfoWindowEx
        marker={this.state.activeMarker}
        visible={this.state.showingInfoWindow}>
        <button type="button" onClick={this.showDetails}>
            Show details
        </button>
</InfoWindowEx>

Demo