How to fixed the size of the map

[altair]

Hi all I hope you all doing well, I have a problem regarding of sizes of map, in the first load the size is good and correct and when the data is load the size of the map is changes, please check the image below

first load

after the data finish the load 

const [getUserData] = useLazyQuery(ME);
const [getLocations] = useLazyQuery(GET_ALL_Star.);
const mapDiv = useRef(style);
let orgId = null;
useEffect(() => {
location();

}, []);

const fetchData = () => {
getUserData()
.then((result) => {
return result.data;
})
.then(({ me }) => {
orgId = organization.id;
return getLocations({
variables: {

paging: {},
},
});
})
.then((result) => {
return result.data;
})
.then(({ location}) => {
displayLocation(location)
});
};

const location = () => {
if (mapDiv.current) {
esriConfig.apiKey = process.env.ARCGIS_API_KEY;
const map = new Map({
basemap: 'arcgis-light-gray',
});

const view = new MapView({
center: [123.5504, 12.3574], // Longitude, latitude
container: mapDiv.current,
map: map,
zoom: 2, // Zoom level
autoResize:true
});
view
.when((r) => {})
.then(() => {
mapDiv.current = view;
fetchData();
});
}
};

const displayLocation = (locations) => {
locations.data = locations.data.filter((l) =>{
return l.geoCode && l.orgId == orgId;
})
const centerLocation = CalculateCenter(locations);
const zoom = CalculateZoomLevel(mapDiv, locations);

mapDiv.current.center = [centerLocation.longitude, centerLocation.latitude];

mapDiv.current.zoom = [zoom];
mapDiv.current.autoResize= false;
locations.data.map((location) => {
const point = new Graphic({
geometry: {
latitude: location.geoCode.latitude,
longitude: location.geoCode.longitude,
type: 'point',
},
symbol: StarPin,
});
mapDiv.current.graphics.add(point);
});
};

return <div className="mapDiv" ref={mapDiv}></div>;

[OwenGeo]

@altair - Are you able to share a link to the story so we can take a look? Also, can you provide some details about what all of the code you shared is and why you included that?