如何在状态改变时在react中重新渲染google地图？

import React from 'react';
import { withGoogleMap, GoogleMap, Marker } from 'react-google-maps';

class MapComponent extends React.Component {
  componentDidMount() {
    // 初始化地图
    // ...
  }

  render() {
    return (
      <GoogleMap
        defaultZoom={8}
        defaultCenter={{ lat: -34.397, lng: 150.644 }}
      >
        <Marker position={{ lat: -34.397, lng: 150.644 }} />
      </GoogleMap>
    );
  }
}

export default withGoogleMap(MapComponent);

class MapComponent extends React.Component {
  state = {
    isMapLoaded: false,
  };

  componentDidMount() {
    // 初始化地图
    // ...

    // 地图加载完成后设置isMapLoaded为true
    this.setState({ isMapLoaded: true });
  }

  render() {
    // 只有当地图加载完成时才渲染地图组件
    if (!this.state.isMapLoaded) {
      return null;
    }

    return (
      <GoogleMap
        defaultZoom={8}
        defaultCenter={{ lat: -34.397, lng: 150.644 }}
      >
        <Marker position={{ lat: -34.397, lng: 150.644 }} />
      </GoogleMap>
    );
  }
}

class App extends React.Component {
  state = {
    isMapVisible: true,
  };

  handleClick = () => {
    // 点击按钮时改变isMapVisible的值，从而触发重新渲染地图
    this.setState((prevState) => ({
      isMapVisible: !prevState.isMapVisible,
    }));
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Toggle Map</button>
        {this.state.isMapVisible && <MapComponent />}
      </div>
    );
  }
}