Marker API can't display inside the Map

[MartinYeung5]

i have used Marker API in my project, however Marker API can't display inside the Map.
The pin image has been displayed outside the Map.

my coding:

import ReactMapGL, { Marker,Popup } from 'react-map-gl';
import { useState } from "react";
import { getCenter } from 'geolib';

function Map({searchResults}) {
const [selectedLocation, setSelectedLocation] = useState({});

const coordinates = searchResults.map((result) => ({
    longitude: result.long,
    latitude: result.lat,
}));

const center = getCenter(coordinates);

const [viewState, setViewState] = useState({
    width: '100%',
    height: '100%',
    //latitude: center.latitude,
    //longitude: center.longitude,
    latitude: 51.510794,
    longitude: -0.08472,
    zoom: 11,
});

console.log("center.latitude: " + center.latitude + " center.longitude: " + center.longitude);

return (
<ReactMapGL
mapStyle="mapbox://styles/yeung2022/cl9mngj5g006114me7fet3hr7"
mapboxAccessToken={process.env.mapbox_key}
{...viewState}
onMove={evt => setViewState(evt.viewState)} //moving Map
>

            <Marker longitude={-0.08472} latitude={51.510794} >
                <p>
                    📌
                </p>
            </Marker>


</ReactMapGL>

);
}

export default Map;