How to use the esri-leaflet.basemapLayer function in esri-leaflet

var L = require('leaflet')
var Esri = require('esri-leaflet')
var Geocoding = require('esri-leaflet-geocoder')

// https://github.com/Leaflet/Leaflet/issues/766
L.Icon.Default.imagePath = 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/images'

var map = L.map('map').setView([37.75, -122.23], 10)
Esri.basemapLayer('Topographic').addTo(map)

var searchControl = Geocoding.Controls.geosearch().addTo(map)
  
var results = L.layerGroup().addTo(map)

searchControl.on('results', function(data){
  results.clearLayers()
  for (var i = data.results.length - 1; i >= 0; i--) {
    results.addLayer(L.marker(data.results[i].latlng))
  }
})

renderMap() {
    if (this.map) {
      this.map.remove()
    }

    let geoJsonLayer
    let layers = [ E.basemapLayer('Imagery'), E.basemapLayer('ImageryLabels') ]
    if (this.props.geometry) {
      let geometry
      if (this.props.geometry.type.toLowerCase() === 'point') {
        geometry = renderPointAsPolygon(this.props.geometry) // allows use of setStyle, which does not exist for GeoJSON points
      }
      else {
        geometry = ensureDatelineFriendlyGeometry(this.props.geometry)
      }
      geoJsonLayer = L.GeoJSON.geometryToLayer({
        type: 'Feature',
        geometry: geometry,
      })
      geoJsonLayer.setStyle({
        color: 'red',
        weight: 5,
        opacity: 1,

let geoJsonSelection = displayBboxAsLeafletGeoJSON(bbox)
    if (geoJsonSelection) {
      geoJsonSelection.geometry = recenterGeometry(geoJsonSelection.geometry)
      let geoJSONLayer = L.geoJson(geoJsonSelection, {style: geoJsonStyle})
      editableLayers.addLayer(geoJSONLayer)
    }

    if (features) {
      updateResultsLayers(props)
    }

    let initialMapProperties = {
      preferCanvas: true,
      maxBounds: BOUNDS,
      maxBoundsViscosity: 1.0,
      layers: [ E.basemapLayer('Imagery'), E.basemapLayer('ImageryLabels') ],
      attributionControl: false,
    }

    // define map with defaults
    setMap(L.map(mapRef.current, initialMapProperties))

    setInitialized(true)

    return () => {
      // unmount
      if (map) {
        map.off('click', onMapClick)
        setMap(null)
      }
    }
  }, [])

if (geoJsonSelection) {
      let geoJSONLayer = L.geoJson(geoJsonSelection, {style: geoJsonStyle})
      editableLayers.addLayer(geoJSONLayer)
    }

    if (features) {
      this.updateResultsLayers(this.props)
    }

    let initialMapProperties = {
      maxBounds: BOUNDS,
      maxBoundsViscosity: 1.0,
      minZoom: 2,
      maxZoom: 5,
      layers: [ E.basemapLayer('Imagery'), E.basemapLayer('ImageryLabels') ],
      attributionControl: false,
    }

    let state = {
      initialized: true,
      resultsLayers,
      editableLayers,
      // Define map with defaults
      map: L.map(ReactDOM.findDOMNode(this.mapNode), initialMapProperties),
      previousLayer: {},
    }
    return state
  }

initMap(node) {
    this.map = this.leaflet.map(node);
    const { center, zoom } = this.props;
    this.map.setView(center, zoom);
    basemapLayer('Gray').addTo(this.map);
    this.updateMap();
  }

createLeafletElement({ layer, ...rest }) {
        return basemapLayer(layer, rest);
    }
}

map.addBasemapType('esri-basemap', function(conf) {
    var layer;
    if (conf.labels) {
        layer = L.layerGroup([
            esri.basemapLayer(conf.layer, conf),
            esri.basemapLayer(conf.layer + 'Labels', conf)
        ]);
    } else {
        layer = esri.basemapLayer(conf.layer, conf);
    }
    return layer;
});