React+Mapbox多边形层

我正在尝试使用react mapbox gl在mapbox上绘制一个简单的多边形。我一直在跟踪演示( http://alex3165.github.io/react-mapbox-gl/demos )但似乎无法让它工作。我从下面的代码中得到以下错误。

import React from 'react';
import PropTypes from 'prop-types';

import MapDropdown from './MapDropdown';

import { Input} from 'reactstrap';
import ReactMapboxGl, { Layer, Feature, Popup } from "react-mapbox-gl";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

const Map = ReactMapboxGl({
  accessToken: "pk.eyJ1IjoiYmFycnlsYWNoYXBlbGxlIiwiYSI6IkVkT1FZX2MifQ.sSg105ALmN6eQgutNxWTOA"
});

const polygonPaint = {
  'fill-color': '#6F788A',
  'fill-opacity': 0.7
};

const AllShapesPolygonCoords = [
  [
    [-0.13235092163085938, 51.518250335096376],
    [-0.1174163818359375, 51.52433860667918],
    [-0.10591506958007812, 51.51974577545329],
    [-0.10831832885742188, 51.51429786349477],
    [-0.12531280517578122, 51.51429786349477],
    [-0.13200759887695312, 51.517823057404094]
  ]
];

const MapPage = props => {


    return(

        <div>

        <Map
            style="mapbox://styles/mapbox/streets-v9"
            containerStyle={{
                height: "100vh",
                width: "100vw",
            }}
            center={props.mapCenter}
            zoom={props.mapZoom}>

            {props.countries
                .map((coords, index) =>

            <Layer type="fill" paint={this.polygonPaint}>
            <Feature coordinates={this.AllShapesPolygonCoords} />
            </Layer>

            )}

        </Map>
        </div>

        </div>

    );

}