How to use the react-leaflet.withLeaflet function in react-leaflet

/>}
      
    )
  }

  _handleDragend = (e: Event & {target: MapEvent}) => {
    this.props.setIsochroneLonLat(lonlat(e.target._latlng))
  }

  _handleDblclick = () => {
    this.props.remove()
  }
}

// Add leaflet to the props
export default withLeaflet(Isochrone)

})
}

/**
 * FitBoundsControl is a react-leaflet MapControl component intended to be used
 * as a child of a react-leaflet Map instance, such as EnhancedMap. When clicked,
 * the control fits the map to the bounds of the current features.
 */
export class FitBoundsControl extends MapControl {
  // props will be available as `options` field in the leaflet control
  createLeafletElement(props) {
    return new FitBoundsLeafletControl(props)
  }
}

export default WithKeyboardShortcuts(withLeaflet(injectIntl(FitBoundsControl)))

/* eslint class-methods-use-this: "off" */
import { GridLayer, withLeaflet } from 'react-leaflet';

class GoogleMapLayer extends GridLayer {
  createLeafletElement() {
    return L.gridLayer.googleMutant({
      type: 'roadmap',
    });
  }

  updateLeafletElement(fromProps, toProps) {
    super.updateLeafletElement(fromProps, toProps);
  }
}

export default withLeaflet(GoogleMapLayer);

/* eslint class-methods-use-this: "off" */
import { GridLayer, withLeaflet } from 'react-leaflet';

class GoogleSatelliteLayer extends GridLayer {
  createLeafletElement() {
    return L.gridLayer.googleMutant({
      type: 'hybrid',
    });
  }

  updateLeafletElement(fromProps, toProps) {
    super.updateLeafletElement(fromProps, toProps);
  }
}

export default withLeaflet(GoogleSatelliteLayer);

return this.props.routes.map(route => {
            return (
                
            );
        });
    }
}

export default withLeaflet(RouteLayer);

}

        this.drawEditableLink();

        return (
            <>
                {this.renderLinkDecorator()}
                {this.renderNodes()}
                {this.renderStartMarker()}
                {this.renderDashedLines()}
            
        );
    }
}

export default withLeaflet(EditLinkLayer);

createLeafletElement(props) {
    return new ShapefileLayerExtended(props)
  }

  updateLeafletElement(fromProps, toProps) {
    const element = this.leafletElement

    const { shapefile } = toProps
    const { shapefileId, shapefileName } = shapefile
    if (!shapefileId && !shapefileName) {
      element.onRemovedFile()
    }
  }
}

export default withLeaflet(ShapefileLayer)

<button type="button" aria-label="{label}">
            {this.props.isExpanded ?  : }
          </button>
        
      
    );
  }
}

export default withLeaflet(ExpandMap);

<button type="button" aria-label="{label}">
            {this.props.isExpanded ?  : }
          </button>
        
      
    );
  }
}

export default withLeaflet(ExpandMap);

createLeafletElement (props) {
    return L.control.polylineMeasure({
      unit: 'landmiles',
      measureControlLabel: '📏',
      backgroundColor: '#f3dd2d',
      clearMeasurementsOnStop: true
    })
  }

  componentDidMount () {
    const { map } = this.props.leaflet
    this.leafletElement.addTo(map)
  }
}

export default withLeaflet(DistanceMeasure)