如何在“react-leaflet”应用程序中包装“leaflet-geosearch”？

import { MapContainer, TileLayer } from 'react-leaflet';
import { GeoSearchControl, OpenStreetMapProvider } from 'leaflet-geosearch';

render() {
  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: '100vh', width: '100%' }}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
    </MapContainer>
  );
}

componentDidMount() {
  const provider = new OpenStreetMapProvider();

  const searchControl = new GeoSearchControl({
    provider: provider,
    showMarker: true,
    showPopup: false,
    marker: {
      icon: new L.Icon.Default(),
      draggable: false,
    },
    style: 'bar',
    searchLabel: 'Enter address, please',
    notFoundMessage: 'Sorry, location not found',
    messageHideDelay: 3000,
    autoClose: true,
    retainZoomLevel: false,
    animateZoom: true,
    keepResult: false,
    updateMap: true,
    searchZoom: 16,
  });

  const map = this.mapRef.current; // 获取地图实例
  map.addControl(searchControl); // 将搜索控件添加到地图上
}

constructor(props) {
  super(props);
  this.mapRef = React.createRef();
}

render() {
  return (
    <MapContainer ref={this.mapRef} center={[51.505, -0.09]} zoom={13} style={{ height: '100vh', width: '100%' }}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
    </MapContainer>
  );
}