Popup not appear on MapBox - reactjs

Question

Help please, i`m not understande why i`m not see popup next to mark on map, i have selectedMarker state and state have coordinates and title, but when i click on mark i don`t see popup with title.
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;
I don`t found some exaples for nextJs or react in mapbox docs