Google Map info window not loading - React - reactjs

Question

I'm very new to React, but I've managed to build a functioning Google Map component that is successfully centering in a location derived from a search and populating the map with results from Json results. However, I can't get an Info Window to show when clicking one of the map markers and I don't know where I'm going wrong.
Here's the code for the Map Marker and the Info Window:
const ReactMapComponent = ({ text }) => (<div style={{ background: 'url(/olb/images/mapMarker.png)', height: '44px', width: '35px', cursor: 'pointer' }}>{}</div>);
const InfoWindow = ({ text }) => (<div style={{ background: '#fff', height: '100px', width: '135px', cursor: 'pointer', position: 'relative', zIndex: 100 }}>{}</div>);
class VenueMapChild extends React.Component {
constructor(props) {
super(props);
this.state = {
isOpen: false
}
}
handleToggleOpen = () => {
this.setState({
isOpen: true
});
};
handleToggleClose = () => {
this.setState({
isOpen: false,
});
};
render() {
return (
<ReactMapComponent
key={this.props.key}
lat={this.props.lat}
lng={this.props.lng}
text={this.props.hotelName}
onClick={() => this.handleToggleOpen()}
>
{this.state.isOpen &&
<InfoWindow onCloseClick={() => this.handleToggleClose()}>
<span>Something</span>
</InfoWindow>
}
</ReactMapComponent>
);
}
}
Thanks in advance