I'm tring to change the coordinates of a react-google-map based on the result of an API

countries.map(({ name, population, region, flags, capital, latlng }) => {
    [lat, long] = latlng;
    console.log(name.common, population, region, flags.png, capital[0]);
    return (
      <MaincountryCard
        name={name.common}
        population={population}
        region={region}
        flag={flags.png}
        capital={capital[0]}
      />
    );
  });

Here is the Component passing lat and lang as props

<MyMapComponent
    isMarkerShown
    googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places`}
    loadingElement={<div style={{ height: `100%` }} />}
    containerElement={<div style={{ height: `400px` }} />}
    mapElement={<div style={{ height: `100%` }} />}
    lat={lat}
    lang={long}
  />

Code of Component

const MyMapComponent = withScriptjs(
    withGoogleMap((props) => {
      return (
        <GoogleMap
          defaultZoom={5}
          defaultCenter={{ lat: props.lat, lng: props.lang }}
        >
          {props.isMarkerShown && <Marker position={{ lat: 30, lng: 70 }} />}
        </GoogleMap>
      );
    })
  );