InfoWindow not popping up when I click on the Marker

Question

This is the code that I wrote to populate map, marker, and infowindow

const MapContainer = (props) => {
    const mapStyles = { width: '70%', height: '70%', position: 'relative' };
    const [showInfoWindow, setInfoWindowFlag] = useState(false);
    return (
        <Map google={props.google}
            style={mapStyles}
            zoom={14}>
            {
                dreInfos.map((dreOfficer, index) => {
                    return (
                        <Marker
                            name={dreOfficer.dreOfficer}
                            position={{ lat: dreOfficer.lat, lng: dreOfficer.lng }}
                            key={index} onClick={(props, marker) => {
                                console.log("Marker Clicked");
                                setInfoWindowFlag(true);
                            }}>
                            <InfoWindow
                                key={dreOfficer.email} visible={showInfoWindow}>
                                <div>Dre Officer: {dreOfficer.dreOfficer}</div>
                            </InfoWindow>
                        </Marker>
                    )
                })
            }
        </Map>)
};

export default GoogleApiWrapper((props) => ({
    apiKey: props.REACT_APP_GOOGLE_API_KEY
})
)(MapContainer)

But it seems that I'm missing something. Could anyone help me solve this problem?

I'm using the google-maps-react library to populate the Map. The marker and map are showing up properly, the only thing is that I'm not able to populate InfoWindow.