react-google-maps not showing on screen - google-maps

Question

i have a react app and i am integrating google map using react-google-maps. It fetches data of lat and lng using node server.
Map.js
import { withGoogleMap, GoogleMap, Marker } from "react-google-maps";
import React from 'react';
// Wrap all `react-google-maps` components with `withGoogleMap` HOC
// and name it GettingStartedGoogleMap
export const GettingStartedGoogleMap = withGoogleMap(props => (
<GoogleMap
ref={props.onMapLoad}
defaultZoom={3}
defaultCenter={props.centre[0]}
onClick={props.onMapClick}>
{props.markers.marker.map((marke, index) => (
<Marker
{...marke}
onRightClick={() => props.onMarkerRightClick(index)}
/>
))}
</GoogleMap>
));
export default GettingStartedGoogleMap;
Layout.js
//some imports
const calculate = (x)=>{
var lt=0;
var lg=0;
var count=0;
x.marker.map((k,i)=>(
lt+=k.position.lat,
lg+=k.position.lng,
count++
))
var centre=[{lat:lt/count, lng:lg/count}];
return centre;
};
export const Layout = props => (
//some div and other elements working fine witout map
<div id="map"><GettingStartedGoogleMap
containerElement={
<div style={{ height: `100%` }} />
}
mapElement={
<div style={{ height: `100%` }} />
}
centre={()=>calculate(props.restraun)}
onMapLoad={_.noop}
onMapClick={_.noop}
markers={props.restraun}
onClick={_.noop}
/></div>
//other elements
);
export default Layout;
Maps is not shown in front end. I have included script tag with api key. Tried changing height from % to fixed value. But still doesn't work.
Data is of format
restran:{
marker:[
{position:
{lat:'value',
lng:'value'
}
key:'value'
}]}
data is being shown correctly if printed on console from node
Edit 1: It seems to be error with the component itself as i was able to print some text instead of markers.