Anchor Link under Map Component not clickable - reactjs

Question

I am writing my first React App (using create-react-app) and I wrote a Map component using google-maps-react. However, the links BELOW the map cannot be clicked.
Actually, on my webpage, this issue is present only on small and medium-sized screens, while it works perfectly on large screens (small, medium and large as defined by materializecss). I tried to reproduce the issue on a minimal working example, without materialize, just using the boilerplate code created by `npx create-react-app my-app' and adding the following:
MapComponent.js
import React from 'react';
import { Map, GoogleApiWrapper } from 'google-maps-react';
const mapStyles = {
width: '80vw',
height: '45vw',
marginLeft: 'auto',
marginRight: 'auto',
display: 'block'
};
const MapComponent = (props) => {
return (
<div className="MapComponent">
<div>
Google
</div>
<Map
google={props.google}
zoom={10}
style={mapStyles}
initialCenter={{
lat: 40,
lng: 12
}}
/>
<div>
Google
</div>
</div>
);
}
export default GoogleApiWrapper({
apiKey: "Key"
})(MapComponent);
and then in App.js:
import React, { Component } from 'react';
import MapComponent from './MapComponent';
class App extends Component {
render() {
return (
<div className="Appr">
<MapComponent />
</div>
);
}
}
export default App;
(the key is not reported in the example, so maps will display the frame with an error message, but the issue is the same with the key). The first link to google.com can be clicked and works, while the second does not. Any solution/workaround?

Answer 1

Finally, I went through the source code of google-maps-react and found the solution. It is very simple but rather undocumented. Apart from style the Map component accepts a containerStyle prop, allowing to change the tyle of the container wrapping Map. By default, the position is set to position: absolute giving the aforementioned behavior. The following code solves the issue for me:
import React from 'react';
import { Map, GoogleApiWrapper } from 'google-maps-react';
const mapStyles = {
width: '80vw',
height: '45vw',
marginLeft: 'auto',
marginRight: 'auto',
display: 'block'
};
const containerStyle = { {/* Added style */}
position: 'static'
}
const MapComponent = (props) => {
return (
<div className="MapComponent">
<div>
Google
</div>
<Map
google={props.google}
zoom={10}
style={mapStyles}
containerStyle={containerStyle} {/* Added prop */}
initialCenter={{
lat: 40,
lng: 12
}}
/>
<div>
Google
</div>
</div>
);
}
export default GoogleApiWrapper({
apiKey: "Key"
})(MapComponent);