Слой React Mapbox не отображается

Я пытаюсь использовать React Mapbox, но у меня возникают проблемы с использованием компонента Layer.

Я пытаюсь следовать этой демонстрации: https://github.com/alex3165/react-mapbox-gl/blob/master/example/src/demos/heatmap.tsx

Или даже демонстрацию быстрого старта с главной страницы: https://github.com/alex3165/react-mapbox-gl

Моя карта отображается, а слой - нет! Вот мой код:

import React, { useState } from "react";
import ReactMapboxGl, { Layer, Feature, ZoomControl, Marker } from "react-mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";
const data = require("./heatmapData.json");

function LiveMap(props) {

  const Map = ReactMapboxGl({
    accessToken: "pk.ey",
  });

  const heatmapPaint = {
    "heatmap-weight": {
      property: "priceIndicator",
      type: "exponential",
      stops: [
        [0, 0],
        [5, 2],
      ],
    },
    // Increase the heatmap color weight weight by zoom level
    // heatmap-ntensity is a multiplier on top of heatmap-weight
    "heatmap-intensity": {
      stops: [
        [0, 0],
        [5, 1.2],
      ],
    },
    // Color ramp for heatmap.  Domain is 0 (low) to 1 (high).
    // Begin color ramp at 0-stop with a 0-transparancy color
    // to create a blur-like effect.
    "heatmap-color": [
      "interpolate",
      ["linear"],
      ["heatmap-density"],
      0,
      "rgba(33,102,172,0)",
      0.25,
      "rgb(103,169,207)",
      0.5,
      "rgb(209,229,240)",
      0.8,
      "rgb(253,219,199)",
      1,
      "rgb(239,138,98)",
      2,
      "rgb(178,24,43)",
    ],
    // Adjust the heatmap radius by zoom level
    "heatmap-radius": {
      stops: [
        [0, 1],
        [5, 50],
      ],
    },
  };

  return (
    <section>
      {/* block */}
      <div className="p-5 rounded-lg">
        {/* map */}
        <Map
          className="h-half rounded-lg shadow-lg z-0"
          style="mapbox://styles/mapbox/streets-v9"
          center={[-0.481747846041145, 51.3233379650232]}
        >
          <ZoomControl />
          <Layer type="heatmap" paint={heatmapPaint}>
            {data.map((el, index) => (
              <Feature key={index} coordinates={el.latlng} properties={el} />
            ))}
          </Layer>

          <Layer type="symbol" id="marker" layout={{ "icon-image": "marker-15" }}>
            <Feature coordinates={[-0.481747846041145, 51.3233379650232]} />
          </Layer>
        </Map>
      </div>
    </section>
  );
}

export default LiveMap;

Я не могу понять, почему моя тепловая карта или мой символ не отображаются на карте. Что я делаю не так?