React - компонент Google Maps не отображается после componentDidMount

У меня просто возникают проблемы с отображением моих карт Google, когда происходит поиск (с почтовым индексом). Похоже, что карта отображает нулевой центр карты, а затем не выполняет повторную визуализацию после setState в componentDidMount (), поскольку карта отображается пустой / серой, но при жестком обновлении карта загрузится с почтовым индексом. Я безуспешно пробовал использовать componentWillMount (), у кого-нибудь есть предложения?

Это код моей страницы поиска:

class SearchContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      map_centre: null
    };
  }

  componentDidMount() {
    const values = queryString.parse(this.props.location.search);
    axios
      .get("api/v1/search?postcode = " + values.postcode)
      .then(response => {
        var mapCentre = response.data.map_centre;
        this.setState({
          map_centre: mapCentre
        });
      })
      .catch(error => console.info(error));
  }

  render() {
    return (
      <div id = "map" className = "padding-left">
        <GoogleMapComponent
          townCenters = {this.state.townCenters}
          schools = {this.state.schools}
          supermarkets = {this.state.supermarkets}
          hotels = {this.state.hotels}
          airports = {this.state.airports}
          trainStations = {this.state.trainStations}
          map_centre = {this.state.map_centre}
          onMapMounted = {this.handleMapMounted}
          onDragEnd = {this.handleMapChange}
          onZoomChanged = {this.handleMapChange}
          onMarkerClick = {this.handleAdspaceShow}
          googleMapURL = {url}
          loadingElement = {<div style = {{ height: `100vh`, width: `100%` }} />}
          containerElement = {<div style = {{ height: `100vh`, width: `100%` }} />}
          mapElement = {<div style = {{ height: `100vh`, width: `100%` }} />}
        />
        <img
          src = {mapSearch}
          id = "map-search-button"
          onClick = {this.toggleSearchInput}
        />
        <input
          id = "map-search-input"
          className = "form-control d-none"
          type = "search"
          placeholder = "Enter new location"
          aria-label = "Search"
          onChange = {this.handlePostcodeChange}
          onKeyPress = {this.handleNewSearch}
        />
      </div>
    );
  }
}

Это код моего компонента Google Maps:

const GoogleMapComponent = withScriptjs(
  withGoogleMap(props => (
    <GoogleMap
      defaultZoom = {13}
      defaultCenter = {props.map_centre}
      onDragEnd = {props.onDragEnd}
      onZoomChanged = {props.onZoomChanged}
      ref = {props.onMapMounted}
    />
  ))
);