реагировать компонент карты Google не правильно встраивает в родительский

Question

Моя карта Google в реакции встроена в родительский компонент. Проблема заключается в том, что он неправильно внедряется в родительский компонент: он как бы нависает над следующими элементами в родительском компоненте: его высота не распознается, поэтому последующие элементы отображаются под картой. Также кнопки под картой не активируются, даже когда отображаются под картой. Когда он не расположен по центру под картой (но отображается слева или справа под ним), на него можно нажать. Вот скриншот перекрытия карты:

Я использую пакет google-maps-реакции. Может ли быть проблема с этим? Вот мой код родительского компонента:

return (
  <IntroBox>
    <div style={rangeStyle}>
    <center>
      <MapContainer
        latLng={this.state.latLng}
        latLngChange={latLng => {
          this.setState({ latLng: latLng });
        }}
      />
    </center>
  </div>
  <Button onClick={this.handleSubmit.bind(this)}>Submit</Button>
</IntroBox>

Код дочернего (MapContainer) компонента:

import { Map, GoogleApiWrapper, Marker, InfoWindow } from "google-maps-react";


const mapStyles = {
  width: "50%",
  height: "400px"
};

const MapBox = styled.div`
  justify-content: center;
  alignitems: "center";
  background: white;
  width: 50%;
  height: "400px";
`;

... extending react component, and returning: ...

<MapBox>
        <Map
          google={this.props.google}
          mapTypeControl={false}
          streetViewControl={false}
          fullscreenControl={false}
          zoom={13}
          style={mapStyles}
          initialCenter={{ lat: this.state.lat, lng: this.state.lng }}
          onClick={(x, y, lat, lng, event) =>
            this.changeMarker(x, y, lat, lng, event)
          }
        >
          <Marker
            position={{ lat: this.props.latLng[0], lng: this.props.latLng[1] }}
          />
        </Map>
      </MapBox>

Есть идеи о том, что я делаю неправильно?

Спасибо!