如何在react js中从<Map>中删除现有的<Marker>组件？

import React, { Component } from 'react';
import { Map, Marker, GoogleApiWrapper } from 'google-maps-react';

class MapContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      markers: [
        { id: 1, lat: 37.7749, lng: -122.4194 },
        { id: 2, lat: 37.7749, lng: -122.4194 },
      ],
    };
  }

  // 删除指定ID的标记
  deleteMarker = (id) => {
    this.setState((prevState) => ({
      markers: prevState.markers.filter((marker) => marker.id !== id),
    }));
  };

  render() {
    return (
      <div style={{ width: '100%', height: '100%' }}>
        <Map
          google={this.props.google}
          initialCenter={{
            lat: 37.7749,
            lng: -122.4194,
          }}
          zoom={13}
        >
          {this.state.markers.map((marker) => (
            <Marker
              key={marker.id}
              position={{ lat: marker.lat, lng: marker.lng }}
              onClick={() => this.deleteMarker(marker.id)}
            />
          ))}
        </Map>
      </div>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: ('YOUR_API_KEY'),
})(MapContainer);