Как я могу добавить источник и слой в свой react-map-gl

я пытаюсь добавить источник и слои на свою карту, и она не отображается, хотя карта отображается. Но всякий раз, когда я меняю исходный тип на вектор, он работал, но я хочу использовать тип geojson (для использования полигонов и полилиний), но, похоже, он не работает.

Я не знаю, что я делаю неправильно, я пытался исправить это часами, даже читал документы, я до сих пор не знаю, что я делаю неправильно.

вот код ниже.

import ReactMapGL, {Source, Layer} from 'react-map-gl'

      const data = {
        type: "Feature",
        geometry: {
        type: "Polygon",
        coordinates: [
        [
        -107.814303,
        37.935657
        ],
        [
        -107.814424,
        37.936094
        ],
        [
        -107.816288,
        37.936826
        ],
        [
        -107.814644,
        37.940931
        ],
        [
        -107.80993,
        37.939892
        ],
        [
        -107.807686,
        37.939376
        ],
        [
        -107.80932,
        37.935416
        ],
        [
        -107.809507,
        37.935014
        ],
        [
        -107.810191,
        37.934835
        ],
        [
        -107.810765,
        37.934708
        ],
        [
        -107.811377,
        37.934732
        ],
        [
        -107.813902,
        37.935372
        ],
        [
        -107.814303,
        37.935657
        ]
        ]
        }
        }


       <ReactMapGL
       mapStyle='mapbox://styles/mapbox/dark-v10'
       mapboxApiAccessToken = {accessKey}
       onViewportChange = {viewport => {
        setViewport(viewport)
    }}
       {...viewport}
       >
       <Source id = "route" type = "geojson" data = {data} />
       <Layer
            id = "route"
            type = "line"
            source = "route"
            paint = {{
              'line-color': "green"
            }} />

       </ReactMapGL> }

Спасибо за помощь в продвижении.