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

value: function render() {
      var _this$props = this.props,
          viewedStop = _this$props.viewedStop,
          stopData = _this$props.stopData;
      if (!viewedStop || !stopData) return _react.default.createElement(_reactLeaflet.FeatureGroup, null);
      return _react.default.createElement(_reactLeaflet.FeatureGroup, null, _react.default.createElement(_reactLeaflet.CircleMarker, {
        key: stopData.id,
        center: [stopData.lat, stopData.lon],
        radius: 9,
        fillOpacity: 1,
        fillColor: "cyan",
        color: "#000",
        weight: 3
      }, _react.default.createElement(_reactLeaflet.Popup, null, _react.default.createElement("div", null, stopData.name))));
    }
  }]);

value: function render() {
      var currentPosition = this.props.currentPosition;
      if (!currentPosition || !currentPosition.coords) return _react.default.createElement(_reactLeaflet.FeatureGroup, null);
      return _react.default.createElement(_reactLeaflet.FeatureGroup, null, _react.default.createElement(_reactLeaflet.CircleMarker, {
        center: [currentPosition.coords.latitude, currentPosition.coords.longitude],
        radius: 3,
        fillOpacity: 0.5,
        fillColor: "#f44",
        color: "#f00",
        weight: 1
      }));
    }
  }]);

_defineProperty(_assertThisInitialized(_this), "_renderStationAsCircle", function (station, symbolDef) {
      var strokeColor = symbolDef.strokeColor || symbolDef.fillColor;

      if (!station.isFloatingBike) {
        strokeColor = symbolDef.dockStrokeColor || strokeColor;
      }

      return _react.default.createElement(_reactLeaflet.CircleMarker, {
        key: station.id,
        center: [station.y, station.x],
        color: strokeColor,
        fillColor: symbolDef.fillColor,
        fillOpacity: 1,
        radius: symbolDef.pixels - (station.isFloatingBike ? 1 : 0),
        weight: 1
      }, _this._renderPopupForStation(station));
    });

train: ,
  ferry: ,
  bus: ,
}

import RotatedMarker from './rotated-marker.jsx'
let leaflet = require('react-leaflet')
let Map = leaflet.Map
let Marker = leaflet.Marker
let Popup = leaflet.Popup
let TileLayer = leaflet.TileLayer
let ZoomControl = leaflet.ZoomControl
let GeoJson = leaflet.GeoJSON
let Icon = require('leaflet').icon
let Circle = leaflet.Circle
let CircleMarker = leaflet.CircleMarker
let CurrentStop = window.location.pathname.slice(3, 7)
let geoID = undefined
let liveRefresh = undefined

const hiddenIcon = Icon({
  iconUrl: '/icons/normal/bus-fill.svg',
  iconSize: [48, 48],
  className: 'hiddenIcon',
})
const busIcon = Icon({
  iconUrl: '/icons/normal/bus-fill.svg',
  iconSize: [24, 24],
  className: 'vehIcon',
})
const trainIcon = Icon({
  iconUrl: '/icons/normal/train-fill.svg',

import { Link, browserHistory } from 'react-router'
import { StationStore } from '../stores/stationStore.js'
import { UiStore } from '../stores/uiStore.js'

let leaflet = require('react-leaflet')
let wkx = require('wkx')
let Buffer = require('buffer').Buffer
let Map = leaflet.Map
let Marker = leaflet.Marker
let Popup = leaflet.Popup
let TileLayer = leaflet.TileLayer
let ZoomControl = leaflet.ZoomControl
let GeoJson = leaflet.GeoJSON
let Icon = require('leaflet').icon
let Circle = leaflet.Circle
let CircleMarker = leaflet.CircleMarker

class Line extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      line: undefined,
      route_id: undefined,
      route_list: []
    }
    this.getWKB = this.getWKB.bind(this)
    this.getShapeIDs = this.getShapeIDs.bind(this)
    this.triggerTap = this.triggerTap.bind(this)
    this.convert = this.convert.bind(this)
  }

  getWKB(shape){

var polygon = [[51.515, -0.09], [51.52, -0.1], [51.52, -0.12]];

      var multiPolygon = [[[51.51, -0.12], [51.51, -0.13], [51.53, -0.13]], [[51.51, -0.05], [51.51, -0.07], [51.53, -0.07]]];

      var rectangle = [[51.49, -0.08], [51.5, -0.06]];

      return _react2['default'].createElement(
        _reactLeaflet.Map,
        { center: center, zoom: 13 },
        _react2['default'].createElement(_reactLeaflet.TileLayer, {
          attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
          url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        }),
        _react2['default'].createElement(_reactLeaflet.Circle, { center: center, fillColor: 'blue', radius: 200 }),
        _react2['default'].createElement(
          _reactLeaflet.CircleMarker,
          { center: [51.51, -0.12], color: 'red', radius: 20 },
          _react2['default'].createElement(
            _reactLeaflet.Popup,
            null,
            _react2['default'].createElement(
              'span',
              null,
              'Popup in CircleMarker'
            )
          )
        ),
        _react2['default'].createElement(_reactLeaflet.Polyline, { color: 'lime', positions: polyline }),
        _react2['default'].createElement(_reactLeaflet.MultiPolyline, { color: 'lime', polylines: multiPolyline }),
        _react2['default'].createElement(_reactLeaflet.Polygon, { color: 'purple', positions: polygon }),
        _react2['default'].createElement(_reactLeaflet.MultiPolygon, { color: 'purple', polygons: multiPolygon }),
        _react2['default'].createElement(_reactLeaflet.Rectangle, { bounds: rectangle, color: 'black' })