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

leaflet: leaflet,
          mobileView: mobileView,
          setLocation: setLocation,
          setViewedStop: setViewedStop,
          setMainPanelContent: setMainPanelContent,
          languageConfig: languageConfig
        });
      }; // Singleton case; return FeatureGroup with single StopMarker


      if (stops.length === 1) {
        return _react.default.createElement(_reactLeaflet.FeatureGroup, null, createStopMarker(stops[0]));
      } // Otherwise, return FeatureGroup with mapped array of StopMarkers


      return _react.default.createElement(_reactLeaflet.FeatureGroup, null, stops.map(function (stop) {
        return createStopMarker(stop);
      }));
    }
  }]);

value: function render() {
      var _this = this;

      var locations = this.props.locations;
      if (!locations || locations.length === 0) return _react.default.createElement(_reactLeaflet.FeatureGroup, null);
      var markerIcon = (0, _leaflet.divIcon)({
        iconSize: [20, 20],
        popupAnchor: [0, -10],
        html: '<div style="width: 20px; height: 20px; background: #000; color: #fff; border-radius: 10px; font-weight: bold; font-size: 16px; padding-left: 4px; padding-top: 10px; line-height: 0px;">P</div>',
        className: ''
      });
      return _react.default.createElement(_reactLeaflet.FeatureGroup, null, locations.map(function (location, k) {
        var name = location.name.startsWith('P+R ') ? location.name.substring(4) : location.name;
        return _react.default.createElement(_reactLeaflet.Marker, {
          icon: markerIcon,
          key: k,
          position: [location.y, location.x]
        }, _react.default.createElement(_reactLeaflet.Popup, null, _react.default.createElement("div", {
          className: "map-overlay-popup"
        }, _react.default.createElement("div", {
          className: "popup-title"

value: function render() {
      var _this$props2 = this.props,
          stations = _this$props2.stations,
          companies = _this$props2.companies;
      var filteredStations = stations;

      if (companies) {
        filteredStations = stations.filter(function (station) {
          return station.networks.filter(function (value) {
            return companies.includes(value);
          }).length > 0;
        });
      }

      if (!filteredStations || filteredStations.length === 0) return _react.default.createElement(_reactLeaflet.FeatureGroup, null);
      return _react.default.createElement(_reactLeaflet.FeatureGroup, null, filteredStations.map(this._renderStation));
    }
  }]);

value: function render() {
      var _this2 = this;

      var _this$props = this.props,
          itinerary = _this$props.itinerary,
          activeLeg = _this$props.activeLeg;
      return _react.default.createElement(_reactLeaflet.FeatureGroup, null, itinerary.legs.map(function (leg, index) {
        var geojson = _polyline.default.toGeoJSON(leg.legGeometry.points);

        geojson.index = index;
        var active = activeLeg === index;
        var color = active ? 'yellow' : (0, _itinerary.isTransit)(leg.mode) ? 'blue' : 'black';
        return _react.default.createElement(_reactLeaflet.GeoJSON, {
          key: Math.random(),
          color: color,
          onClick: _this2._onLegClick,
          data: geojson
        });
      }));
    }
  }]);

value: function render() {
      var _this3 = this;

      var features = Array.isArray(this.props.data) ? this.props.data : this.props.data.features;
      var chroms = this.getColors();

      var _props3 = this.props,
          layerContainer = _props3.layerContainer,
          identity = _props3.identity,
          options = _objectWithoutProperties(_props3, ['layerContainer', 'identity']); //remove 


      return _react2.default.createElement(
        _reactLeaflet.FeatureGroup,
        { map: this.props.map, layerContainer: layerContainer, ref: function ref(layer) {
            return layer ? _this3.leafletElement = layer.leafletElement : null;
          } },
        features.map(function (feature, idx) {
          return _react2.default.createElement(_reactLeaflet.GeoJSON, _extends({
            key: identity ? identity(feature) : idx
          }, options, {
            style: _this3.getStyle(chroms, feature)
          }, _this3.getStyle(chroms, feature), {
            data: feature,
            children: _this3.props.children ? _this3.cloneChildrenWithFeature(_this3.props, feature) : _this3.props.children
          }));
        })
      );
    }
  }]);

value: function render() {
      var _this2 = this;

      var stations = this.props.stations;


      if (!stations || stations.length === 0) return _react2.default.createElement(_reactLeaflet.FeatureGroup, null);

      var bulletIconStyle = {
        color: 'gray',
        fontSize: 12,
        width: 10
      };

      return _react2.default.createElement(
        _reactLeaflet.FeatureGroup,
        null,
        stations.map(function (station) {
          var stationName = station.networks.join('/') + ' ' + station.id;
          return _react2.default.createElement(
            _reactLeaflet.Marker,
            {
              icon: carRentalNetworkIconLookup[station.networks] || carRentalNetworkIconLookup.default,
              key: station.id,
              position: [station.y, station.x]
            },
            _react2.default.createElement(
              _reactLeaflet.Popup,
              null,
              _react2.default.createElement(
                'div',
                { className: 'map-overlay-popup' },

value: function render() {
      var routeData = this.props.routeData;
      if (!routeData || !routeData.patterns) return _react.default.createElement(_reactLeaflet.FeatureGroup, null);
      var routeColor = routeData.color ? "#".concat(routeData.color) : '#00bfff';
      var segments = [];
      Object.values(routeData.patterns).forEach(function (pattern) {
        if (!pattern.geometry) return;

        var pts = _polyline.default.decode(pattern.geometry.points);

        segments.push(_react.default.createElement(_reactLeaflet.Polyline, {
          positions: pts,
          weight: 4,
          color: routeColor,
          opacity: 1,
          key: pattern.id
        }));
      });
      return segments.length > 0 ? _react.default.createElement(_reactLeaflet.FeatureGroup, null, _react.default.createElement("div", null, segments)) : _react.default.createElement(_reactLeaflet.FeatureGroup, null);