Parent resize does not work in initial loading map

[sam13591980]

Hello

I am using @react-google-maps/api (2.18.1) to use google map inside Next JS app.

Based on their documents, they mentioned that the parent HTML element could determine the size of the map.

My return function from my component looks like this:

return (
<div
style={{
display: "flex",
flexDirection: "column",
height: "100vh",
width: "100%",
}}
>
<GoogleMap
options={mapOptions}
zoom={mapOption.zoom}
center={mapCenter}
mapTypeId={google.maps.MapTypeId.ROADMAP}
mapContainerStyle={{width: "300px",height: "300px"}}
onLoad={() => console.log("Map Component Loaded...")}
/>

)
So basically I need to determine the width and height of the map and via parent, it would be overridden if I want to make it fill the entire screen. The problem is that the above return still shows the map with 300 to 300 px. Does anyone have any solution so that the initial map fills the entire screen?