How to use the react-mapbox-gl function in react-mapbox-gl

const DatePicker = require('react-datepicker').default;
// tslint:disable-next-line:no-submodule-imports
import 'react-datepicker/dist/react-datepicker.css';

const NavBar = styled.div`
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  min-height: 120px;
  justify-content: center;
  align-items: center;
`;

const Map = ReactMapboxGl({
  accessToken:
    'pk.eyJ1IjoiYWxleDMxNjUiLCJhIjoiY2o0MHp2cGtiMGFrajMycG5nbzBuY2pjaiJ9.QDApU0XH2v35viSwQuln5w',
  attributionControl: false
});

const containerStyle = {
  height: '100vh',
  width: '100vw'
};

export interface Props {
  getLocations: any;
  locations: any;
}

export interface State {

/* eslint react/no-danger: off, react/style-prop-object: off */
import React from 'react'
import PropTypes from 'prop-types'
import ReactMapboxGl from 'react-mapbox-gl'

// eslint-disable-next-line new-cap
const Map = ReactMapboxGl({})

const containerStyle = {
  height: '100%',
  width: '100%',
  boxShadow: '0 1px 4px #C9D3DF'
}

class Mapbox extends React.Component {
  render() {
    const {center, zoom, onStyleLoad, onDrag, onZoom, onClick, children} = this.props

    return (

import * as React from 'react';
import ReactMapboxGl from "react-mapbox-gl";
import * as dat from 'dat.gui';
import { TextLayer } from '../../src';
// import { featureEach } from '@turf/meta';

const Map = ReactMapboxGl({
  accessToken: 'pk.eyJ1IjoieGlhb2l2ZXIiLCJhIjoiY2pxcmc5OGNkMDY3cjQzbG42cXk5NTl3YiJ9.hUC5Chlqzzh0FFd_aEc-uQ'
});

export default class VectorLineLayer extends React.Component {

  private gui: dat.GUI;
  private $stats: Node;

  componentWillUnmount() {
    if (this.gui) {
      this.gui.destroy();
    }
    if (this.$stats) {
      document.body.removeChild(this.$stats);
    }
  }

color: 'white',
    border: '2px solid #56C498'
  },
  marker: {
    width: 30,
    height: 30,
    borderRadius: '50%',
    backgroundColor: '#E0E0E0',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    border: '2px solid #C9C9C9'
  }
}

const Map = ReactMapboxGl({
  accessToken: config.accessToken
});

export default class ClusterExample extends Component {

  onMarkerClick(coords) {
    console.log(coords);
  }

  clusterMarker = (coordinates, pointCount) => (
    
  );

  render() {

import React, {Component} from 'react';
import ReactMapboxGl from 'react-mapbox-gl';
import {ReactMapboxGlCluster} from './lib';
import {data} from './data';
import './App.css';

const Map = ReactMapboxGl({
  accessToken: process.env.REACT_APP_MAPBOX_GL_TOKEN,
});

const mapProps = {
  center: [-95.7129, 37.0902],
  zoom: [3],
  style: 'mapbox://styles/mapbox/streets-v8',
};

const CustomSpiralComponent = ({properties, ...restProps}) => {
  const onClick = e => {
    console.log(`Receive event onClick in spiral at properties: ${JSON.stringify(properties)}`);
  };
  return <div></div>;
};

email,
      address,
      website,
      description,
      hours,
      city,
      languages,
      requiredDocuments,
      cost,
      category,
      subcategory,
      resourceExists,
      eligibility,
    } = this.state;

    const Map = ReactMapboxGl({
      accessToken:
        'pk.eyJ1IjoiYW5vb2psYWwiLCJhIjoiY2syemtiYjZoMGp1' +
        'eDNscXQ3azJzajl0bCJ9.FDSFjP1IfSisbm4uvd70vg',
      interactive: false,
    });

    const { authed, match, authRoleIsEquivalentTo } = this.props;

    if (!resourceExists) {
      return ;
    }

    return (
      <div>
        </div>

import React from "react";
import ReactDOM from "react-dom";
import ReactMapboxGl, { Source, Layer } from "react-mapbox-gl";
import config from "./config";
import stateBounds from "./state-bounds.js";

const Map = ReactMapboxGl({
  accessToken: config.MAPBOX_ACCESS_TOKEN,
});

export default class DistrictMap extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      bounds: stateBounds[props.state],
      display: true,
    };
  }

  componentDidMount() {
    const map = this;
    fetch(
      "https://data.openstates.org/boundaries/2018/" +

import React from 'react';
import mapboxgl from 'mapbox-gl';
import ReactMapboxGL from 'react-mapbox-gl';

const MapContainer = ReactMapboxGL({
	accessToken:
		'pk.eyJ1Ijoia29yZWRlMzYwIiwiYSI6ImNqZno1MGN2YjBhOTgyd2xlbWFhMGQ3dmwifQ.1AbAu_Ga4bu4iQCnOgBfog'
});

interface MapState {
	lng: number;
	lat: number;
	zoom: number;
}

const initialMapState = {
	lng: 1,
	lat: 24,
	zoom: 8
};

import LegislatorImage from "./legislator-image";
import config from "./config";

function multipolyToPath(coordinates) {
  return coordinates.map(polygon =>
    polygon[0].map(point => ({ lat: point[1], lng: point[0] }))
  );
}

function chamberColor(leg) {
  return leg.chamber === "lower"
    ? config.LOWER_CHAMBER_COLOR
    : config.UPPER_CHAMBER_COLOR;
}

const Map = ReactMapboxGl({
  accessToken: config.MAPBOX_ACCESS_TOKEN,
});

class ResultMap extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    var shapes = [];
    for (var leg of this.props.legislators) {
      if (leg.shape) {
        const color = chamberColor(leg);
        shapes.push(

import * as React from 'react';
import ReactMapboxGl from "react-mapbox-gl";
import * as dat from 'dat.gui';
import { VectorTileClusterLayer } from '../../src';

const Map = ReactMapboxGl({
  accessToken: 'pk.eyJ1IjoieGlhb2l2ZXIiLCJhIjoiY2pxcmc5OGNkMDY3cjQzbG42cXk5NTl3YiJ9.hUC5Chlqzzh0FFd_aEc-uQ'
});

export default class VectorLineLayer extends React.Component {

  private gui: dat.GUI;
  private $stats: Node;

  componentWillUnmount() {
    if (this.gui) {
      this.gui.destroy();
    }
    if (this.$stats) {
      document.body.removeChild(this.$stats);
    }
  }