How to use the leaflet-geosearch.GeoSearchControl function in leaflet-geosearch

static addSearchControl(map, onLocationSelected) {
        // https://github.com/smeijer/leaflet-geosearch#geosearchcontrol
        const searchControl = new GeoSearchControl({
            provider: new OpenStreetMapProvider(),
            style: 'bar',
            //--------
            // if autoComplete is false, need manually calling provider.search({ query: input.value })
            autoComplete: true,         // optional: true|false  - default true
            autoCompleteDelay: 250,     // optional: number      - default 250
            //--------
            showMarker: false,          // optional: true|false  - default true
            showPopup: false,           // optional: true|false  - default false
            // marker: {                // optional: L.Marker    - default L.Icon.Default
            //     icon: new L.Icon.Default(),
            //     draggable: false,
            // },
            // popupFormat: ({ query, result }) => result.label,   // optional: function    - default returns result label
            // maxMarkers: 1,              // optional: number      - default 1
            retainZoomLevel: true,      // optional: true|false  - default false

}*/
    };
    drawControl = new L.Control.Draw(drawOptions);
    map.addControl(drawControl);

    // add osm basemap
    let openStreetMapMapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    });
    openStreetMapMapnik.addTo(map);

    // add search
    let provider = new OpenStreetMapProvider();

    let searchControl = new GeoSearchControl({
      provider: provider,
    });
    map.addControl(searchControl);

    map.on('click', e =&gt; {
      store.dispatch(unfocusMenu());
      if (self.drawingPoints) {
        store.dispatch(removeGeometry());
        store.dispatch(addGeometry(e.latlng, 'point'));

        // temporary - setting results for identify here since
        // i can't find a good way of getting it in to the identify
        // tool while using leaflet for mapping
        const latlng = [e.latlng.lng, e.latlng.lat];
        const results = geoblaze.identify(self.raster.georaster, latlng);
        store.dispatch(setResults(results));

let newCircle = circle( position,  {radius: this.props.modalState.distance});
          newCircle._createdTime = new Date();
          newCircle._type = 'geolocationModal';
          newCircle.addTo(map);
          setTimeout( () => { map.flyTo(position); map.fitBounds(newCircle.getBounds()) }, 200);
        }

        // save the react component so that the map's events can use the react state
        map.reactContext = this;

        // uncomment to zoom in on the user's location on startup
        //navigator.geolocation.getCurrentPosition( x => map.setView( [x.coords.latitude, x.coords.longitude], 13 ));

        const provider = new OpenStreetMapProvider();
        const searchControl = new GeoSearchControl({
          style: 'bar',
          provider: provider,
          showMarker: false,
          keepResult: true,
          autoClose: true
        });

        const getMapControlOptions = drawnItems => ({ draw: { polygon: false, marker: false, rectangle: false, square: false, circle: true, polyline: false, circlemarker: false }, edit: { featureGroup: drawnItems, edit: false, remove: false } });

        // tile configuration for the map
        tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

        var drawnItems = new featureGroup();
        map.addLayer(drawnItems);

        // add the geolocation search controller

function onload2 (initState) {
  // Measurement plugin
  if (L.control.polylineMeasure) {
    L.control.polylineMeasure({
    }).addTo(map);
  }

  // Add Geo Search
  var provider = new LeafletGeoSearch.OpenStreetMapProvider()
  var searchControl = new LeafletGeoSearch.GeoSearchControl({
    provider: provider,
    showMarker: false,
    retainZoomLevel: true
  })
  map.addControl(searchControl)

  // Geo location
  L.control.locate({
    keepCurrentZoomLevel: true,
    drawCircle: false,
    drawMarker: false,
    showPopup: false
  }).addTo(map)

  // Scale bar
  L.control.scale().addTo(map)

function addToMap() {
    new GeoSearchControl({ provider, style: 'bar' }).addTo(map);
  }

function addAsControl() {
    const searchControl = new GeoSearchControl({ provider });
    map.addControl(searchControl);
  }

import L from 'leaflet';
import {
  GeoSearchControl,
  OpenStreetMapProvider,
} from 'leaflet-geosearch';

const provider = new OpenStreetMapProvider();

const searchControl = new GeoSearchControl({
  provider: provider,
});

const map = new L.Map('map');
map.addControl(searchControl);

import L from 'leaflet';
import {
  GeoSearchControl,
  EsriProvider,
} from 'leaflet-geosearch';

const provider = new EsriProvider();

const searchControl = new GeoSearchControl({
  provider: provider,
});

const map = new L.Map('map');
map.addControl(searchControl);

import L from 'leaflet';
import {
  GeoSearchControl,
  GoogleProvider,
} from 'leaflet-geosearch';

const provider = new GoogleProvider({ params: {
  key: '__YOUR_GOOGLE_KEY__',
} });

const searchControl = new GeoSearchControl({
  provider: provider,
});

const map = new L.Map('map');
map.addControl(searchControl);