title: Search Box implementation in React-leaflet v3.1.0
body: <p>I am trying to implement a <code>searchbox</code> feature in my react app. But getting this error &quot;Attempted import error: 'MapControl' is not exported from 'react-leaflet'&quot; in the new version of react-leaflet</p>
  <pre><code>import { MapContainer, TileLayer, Polygon, Marker, Popup } from 'react-leaflet';
  import &quot;./index.css&quot;;
  
  // Cordinates of Marcillac
  const center = [45.269169177925754, -0.5231516014256281]
  const purpleOptions = { color: 'white' }
  
  class MapWrapper extends React.Component {
      render() {
          return (
              &lt;div id=&quot;mapid&quot;&gt;
                  &lt;MapContainer center={center} zoom={13} scrollWheelZoom={true}&gt;
                      &lt;TileLayer
                          attribution='&amp;copy; &lt;a href=&quot;http://www.openstreetmap.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt; &amp;copy; &lt;a href=&quot;http://cartodb.com/attributions&quot;&gt;CartoDB&lt;/a&gt;'
                          url='https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png'
                      /&gt;
                  &lt;/MapContainer&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default MapWrapper;
  </code></pre>
  <p>The implementation given here <code>https://stackoverflow.com/questions/48290555/react-leaflet-search-box-implementation</code> doesnt work as <code>MapControl</code> is depricted.</p>
  <p>Tried 2nd solution as well.</p>
  <pre><code>import { Map, useLeaflet } from 'react-leaflet'
  import { OpenStreetMapProvider, GeoSearchControl } from 'leaflet-geosearch'
  
  // make new leaflet element
  const Search = (props) =&gt; {
      const { map } = useLeaflet() // access to leaflet map
      const { provider } = props
  
      useEffect(() =&gt; {
          const searchControl = new GeoSearchControl({
              provider,
          })
  
          map.addControl(searchControl) // this is how you add a control in vanilla leaflet
          return () =&gt; map.removeControl(searchControl)
      }, [props])
  
      return null // don't want anything to show up from this comp
  }
  
  
  export default function Map() {
    return (
      &lt;Map {...otherProps}&gt;
        {...otherChildren}
        &lt;Search provider={new OpenStreetMapProvider()} /&gt;
      &lt;/Map&gt;
  
    )
  }
  </code></pre>
  <p>Here I get map.addControl is not defined</p>