How to use the leaflet.layerGroup function in leaflet

// Create GL Baselayers
    var positronBaselayer = L.mapboxGL({style: HOST_PATH + '/map/styles/positron/style.json'});
    var darkBaselayer = L.mapboxGL({style: HOST_PATH + '/map/styles/dark-matter/style.json'});
    var klokBaselayer = L.mapboxGL({style: HOST_PATH + '/map/styles/klokantech-basic/style.json'});
    var osmBaselayer = L.mapboxGL({style: HOST_PATH + '/map/styles/osm-bright/style.json'});
    var baselayers = {
      'Positron': positronBaselayer,
      'Black Matter': darkBaselayer,
      'Klokantech': klokBaselayer,
      'OSM Bright': osmBaselayer
    };

    // Create Layer Group Overlays
    this.ueOverlay = L.layerGroup();
    this.uePathOverlay = L.layerGroup();
    this.poaOverlay = L.layerGroup();
    this.poaRangeOverlay = L.layerGroup();
    this.computeOverlay = L.layerGroup();
    var overlays = {
      'terminal': this.ueOverlay,
      'terminal-path': this.uePathOverlay,
      'poa': this.poaOverlay,
      'poa-coverage': this.poaRangeOverlay,
      'compute': this.computeOverlay
    };

    // Create Layer Controller
    this.layerCtrl = L.control.layers(baselayers, overlays);

    // Create popup
    this.popup = L.popup();

// Create GL Baselayers
    var positronBaselayer = L.mapboxGL({style: HOST_PATH + '/map/styles/positron/style.json'});
    var darkBaselayer = L.mapboxGL({style: HOST_PATH + '/map/styles/dark-matter/style.json'});
    var klokBaselayer = L.mapboxGL({style: HOST_PATH + '/map/styles/klokantech-basic/style.json'});
    var osmBaselayer = L.mapboxGL({style: HOST_PATH + '/map/styles/osm-bright/style.json'});
    var baselayers = {
      'Positron': positronBaselayer,
      'Black Matter': darkBaselayer,
      'Klokantech': klokBaselayer,
      'OSM Bright': osmBaselayer
    };

    // Create Layer Group Overlays
    this.ueOverlay = L.layerGroup();
    this.uePathOverlay = L.layerGroup();
    this.poaOverlay = L.layerGroup();
    this.poaRangeOverlay = L.layerGroup();
    this.computeOverlay = L.layerGroup();
    var overlays = {
      'terminal': this.ueOverlay,
      'terminal-path': this.uePathOverlay,
      'poa': this.poaOverlay,
      'poa-coverage': this.poaRangeOverlay,
      'compute': this.computeOverlay
    };

    // Create Layer Controller
    this.layerCtrl = L.control.layers(baselayers, overlays);

    // Create popup
    this.popup = L.popup();

var darkBaselayer = L.mapboxGL({style: HOST_PATH + '/map/styles/dark-matter/style.json'});
    var klokBaselayer = L.mapboxGL({style: HOST_PATH + '/map/styles/klokantech-basic/style.json'});
    var osmBaselayer = L.mapboxGL({style: HOST_PATH + '/map/styles/osm-bright/style.json'});
    var baselayers = {
      'Positron': positronBaselayer,
      'Black Matter': darkBaselayer,
      'Klokantech': klokBaselayer,
      'OSM Bright': osmBaselayer
    };

    // Create Layer Group Overlays
    this.ueOverlay = L.layerGroup();
    this.uePathOverlay = L.layerGroup();
    this.poaOverlay = L.layerGroup();
    this.poaRangeOverlay = L.layerGroup();
    this.computeOverlay = L.layerGroup();
    var overlays = {
      'terminal': this.ueOverlay,
      'terminal-path': this.uePathOverlay,
      'poa': this.poaOverlay,
      'poa-coverage': this.poaRangeOverlay,
      'compute': this.computeOverlay
    };

    // Create Layer Controller
    this.layerCtrl = L.control.layers(baselayers, overlays);

    // Create popup
    this.popup = L.popup();

    // Initialize map & layers
    this.layerCtrl.addTo(this.map);

polygon.pm.toggleEdit(editOptions);
enabled = polygon.pm.enabled();

const polyline: L.Polyline = L.polyline([ [ 1.0, 1.0], [ 2.0, 1.0], [ 1.0, 2.0] ]);
polyline.pm.enable(editOptions);
polyline.pm.disable();
polyline.pm.toggleEdit(editOptions);
enabled = polyline.pm.enabled();

const marker: L.Marker = L.marker([ 3.0, 3.0 ]);
marker.pm.enable(editOptions);
marker.pm.disable();
marker.pm.toggleEdit(editOptions);
enabled = marker.pm.enabled();

const layerGroup: L.LayerGroup = L.layerGroup([ polygon, polyline, marker ]);
layerGroup.pm.enable(editOptions);
layerGroup.pm.disable();
layerGroup.pm.toggleEdit(editOptions);
enabled = layerGroup.pm.enabled();
const layers: L.Layer[] = layerGroup.pm.findLayers();
const dragging: boolean = layerGroup.pm.dragging();
const options: L.PM.EditOptions = layerGroup.pm.getOptions();

class MarkerClass { }
class MarkerEditorClass { }
class MiddleMarkerClass { }
class PolygonClass { }
class PolygonEditorClass { }
class PolylineClass { }
class PolylineEditorClass { }
class VertexMarkerClass { }

const map: L.Map = L.map('div', {
    editable: true,
    editOptions: {
        drawingCSSClass: 'css-class',
        editLayer: L.layerGroup(),
        featuresLayer: L.layerGroup(),
        lineGuideOptions: {},
        markerClass: MarkerClass,
        markerEditorClass: MarkerEditorClass,
        middleMarkerClass: MiddleMarkerClass,
        polygonClass: PolygonClass,
        polygonEditorClass: PolygonEditorClass,
        polylineClass: PolylineClass,
        polylineEditorClass: PolylineEditorClass,
        skipMiddleMarkers: true,
        vertexMarkerClass: VertexMarkerClass
    }
});

const currentPoly: L.Polygon|L.Polyline| L.Marker = map.editTools.currentPolygon;
map.editTools.stopDrawing();

setTimeout(() => {
      const map = L.map('map', {
        minZoom: 1,
        maxZoom: 18,
        center: [30.481913, 6.499247],
        zoom: 1,
        layers: [L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
        })],
        attributionControl: true,
        preferCanvas: true,
      })
      this.setState({
        map,
        markerGroup: L.layerGroup().addTo(map),
      }, () =&gt; this.addMarkers())
    }, 0)
  }

componentDidMount() {
        let opt = assign({}, defaultOpt, this.props.overviewOpt);
        if (this.props.layers) {
            let lfLayers = [];
            this.props.layers.forEach((layerOpt) => {
                lfLayers.push(Layers.createLayer(layerOpt.type, layerOpt.options || {}));
            });
            if (lfLayers.length === 1 ) {
                this.overview = new MiniMap(lfLayers[0], opt);
            } else if (lfLayers.length > 1 ) {
                this.overview = new MiniMap(L.layerGroup(lfLayers), opt);
            }
        }
        if (this.props.map && this.overview) {
            this.overview.addTo(this.props.map);
        }
    }

displayMap () {
    this.npcs = {}
    this.players = {}
    this.warps = {}
    this.items = {}
    this.objects = {}
    this.walls = []
    this.path = null

    const mapElement = this.shadowRoot.querySelector('#map')
    this.playerLayer = L.layerGroup()
    this.npcLayer = L.layerGroup()
    this.itemLayer = L.layerGroup()
    this.objectLayer = L.layerGroup()
    this.warpLayer = L.layerGroup()
    this.wallLayer = L.layerGroup()

    const baseMaps = {
      'grid': this.createGrid()
    }

    const overlayMaps = {
      'player': this.playerLayer,
      'npc': this.npcLayer,
      'item': this.itemLayer,
      'object': this.objectLayer,
      'warp': this.warpLayer,
      'wall': this.wallLayer
    }

componentDidMount() {
    const featuresLayer = L.layerGroup();
    let map = new L.Map(this.mapRef.current, {
      editable: true,
      editOptions: {
        featuresLayer
      }
    });
    const { layer } = this.props;
    L.control
      .scale()
      .setPosition("bottomright")
      .addTo(map);
    map.zoomControl.setPosition("topright");
    map.setView([20, 0], 2);

    L.hash(map);
    const metric =