重新加载ReactLeaflet映射的问题

import { Map, TileLayer } from 'react-leaflet';

class MyMap extends React.Component {
  render() {
    return (
      <Map center={[51.505, -0.09]} zoom={13}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution="Map data © OpenStreetMap contributors"
        />
      </Map>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mapKey: 0, // 用于触发重新渲染的关键属性
    };
  }

  reloadMap() {
    this.setState(prevState => ({
      mapKey: prevState.mapKey + 1,
    }));
  }

  render() {
    return (
      <div>
        <MyMap key={this.state.mapKey} />
        <button onClick={() => this.reloadMap()}>重新加载地图</button>
      </div>
    );
  }
}