Display marker in react-mapbox-gl with Feature and Layers - reactjs

Question

I'm using the example code that's on the "alex3165/react-mapbox-gl" GitHub repo. Not the example folder but the Getting Started example. The map shows but the marker just doesn't show. Not sure what I am dong wrong. Been cracking my head around such a basic thing but just cant solve it. I have looked at previous questions on the net around this topic but none is a solution for me. Here is my code and my dependencies. Help will be really appreciated. Thanks in advance guys.
PACKAGE 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"
},
CODE:
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;