反应Google Map组件未正确嵌入父项

Question

我的Google Map in react被嵌入到父组件中。 问题在于它没有正确地嵌入到父组件中：它在父组件中的下一项上徘徊：无法识别其高度，因此后续项会出现在地图下。此外，即使在地图下方显示按钮，也无法单击其下方的按钮。如果不在地图下方居中（但显示在地图的左侧或右侧），则可以单击。这是地图重叠部分的屏幕截图：

我正在使用google-maps-react软件包。可能有问题吗？ 这是我父组件的代码：

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>

对我在做什么错有任何想法吗？

谢谢！