弹出窗口不会出现在 MapBox 上

Question

请帮忙，我不明白为什么我在地图上的标记旁边看不到弹出窗口，我选择了标记状态和状态有坐标和标题，但是当我点击标记时我没有看到带有标题的弹出窗口。

import Map, {Marker, Popup} from 'react-map-gl';
import getCenter from 'geolib/es/getCenter';
import {SearchPageProps} from '@/interfaces';
import 'mapbox-gl/dist/mapbox-gl.css';

interface ISelectedMarker {
long: number;
lat: number;
title: string;
}

const ReactMap = ({searchResultItems}: SearchPageProps) => {
const coordinates = searchResultItems.map(({long, lat}) => ({
  longitude: long,
  latitude: lat,
}));

const [selectedMarker, setSelectedMarker] = useState<ISelectedMarker | null>(null);

const center = getCenter(coordinates);

const [viewPort, setViewPort] = useState({
  longitude: center ? center.longitude : 0,
  latitude: center ? center.latitude : 0,
  zoom: 11,
});

console.log(selectedMarker?.title);
return (
  <Map
    mapStyle={'mapbox://styles/nealesha/cle7nqemb00bj01te4og4kd05'}
    initialViewState={viewPort}
    mapboxAccessToken={process.env.mapbox_key}
    onMove={evt => setViewPort(evt.viewState)}>
    {searchResultItems.map(({long, lat, title}, index) => (
      <div key={`${long}_${lat}_${index}`}>
        <Marker longitude={long} latitude={lat} anchor={'left'}>
          <p
            role={'img'}
            aria-label={'push-pin'}
            onClick={() => setSelectedMarker({long, lat, title})}
            className={'cursor-pointer text-2xl'}>
            📌
          </p>
        </Marker>
        {selectedMarker?.long === long && (
          <Popup longitude={long} latitude={lat}>
            <div>{title}</div>
          </Popup>
        )}
      </div>
    ))}
  </Map>
);
};

export default ReactMap;

我没有找到 nextJs 的例子或在 mapbox 文档中做出反应