Reactjs 在带有要素和图层的映射框gl中显示标记

我正在使用“alex3165/react mapbox gl”GitHub repo上的示例代码。不是示例文件夹，而是入门示例。地图显示了，但标记没有显示。不知道我错了什么。我一直在绞尽脑汁想这样一件基本的事情，但就是解决不了。我已经在网上看了以前关于这个话题的问题，但没有一个是我的解决方案。这是我的代码和依赖项。我会非常感激你的帮助。提前谢谢各位

包JSON

  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "mapbox-gl": "^1.13.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-mapbox-gl": "^5.0.0",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  }, 

代码：

import React，{useState}来自“React”；
导入“/App.css”；
从“react mapbox gl”导入react MapboxGL，{Layer，Feature，Marker}；
const Map=ReactMapboxGl({
accessToken:“”，
});
函数App（）{
const[Zoom，setZoom]=useState（10）；
const[coordinates，setcoordinates]=useState（[28.0473197，-26.2041059]）；
返回(
);
}
导出默认应用程序；

在v5.0.0中发生了一些变化，但他们没有更新文档，也没有人关心。如果您降级到v4.8.6，您应该会看到标记。虽然我不确定marker-15是否存在于streets-v9风格中。非常感谢Anatoly Sukhanov先生，您的解决方案有效。非常感谢

import React, { useState } from "react";
import "./App.css";
import ReactMapboxGl, { Layer, Feature, Marker } from "react-mapbox-gl";
const Map = ReactMapboxGl({
  accessToken: "<my access token goes here>",
});

function App() {
  const [Zoom, setZoom] = useState(10);
  const [coordinates, setcoordinates] = useState([28.0473197, -26.2041059]);
  return (
    <div className="App">
      <Map
        center={coordinates}
        zoom={[Zoom]}
        // eslint-disable-next-line react/style-prop-object
        style="mapbox://styles/mapbox/streets-v9"
        containerStyle={{
          height: "100vh",
          width: "100vw",
        }}
      >
        <Layer type="symbol" id="marker" layout={{ "icon-image": "marker-15" }}>
          <Feature coordinates={[28.0473197, -26.2041059]} />
        </Layer>
      </Map>
    </div>
  );
}

export default App;