Reactjs 获取点击的国家地区名称react 映射

我正在使用react map GL，我想显示被点击的国家的名称(我只需要其他用途的名称). 目前，我有这样的代码:

import React, { useCallback, useMemo, useState } from "react";
import Map, {
  Marker,
  NavigationControl,
  FullscreenControl,
  ScaleControl,
  GeolocateControl,
  Source,
  Layer,
} from "react-map-gl";
import "mapbox-gl/dist/mapbox-gl.css";
import Pin from "../../atoms/Pin/Pin";
import "./Map.scss";
import CITIES from "./cities";
import { useNavigate } from "react-router";

const MapNew = () => {
  const navigate = useNavigate();
  const [hoveredCountry, setHoveredCountry] = useState(null);
  const [cursor, setCursor] = useState<string>("auto");

  const onClick = useCallback((event) => {
    const feature = event.features && event.features[0];
    if (feature) {
      const countryName = feature.properties.name;
      window.alert(`Clicked on ${countryName}`);
    }
  }, []);

  const pins = useMemo(
    () =>
      CITIES.map((city, index) => (
        <Marker
          key={`marker-${index}`}
          longitude={city.longitude}
          latitude={city.latitude}
          anchor="bottom"
        >
          <Pin />
        </Marker>
      )),
    []
  );

  const geojsonUrl =
    "https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_countries.geojson";

  const sourceId = "countries";
  const layerId = "country-fills";

  return (
    <div className="map-parent-wrapper">
      <Map
        initialViewState={{
          latitude: 51.1657,
          longitude: 10.4515,
          zoom: 3,
          bearing: 0,
          pitch: 0,
        }}
        mapStyle="mapbox://styles/mapbox/navigation-day-v1"
        mapboxAccessToken=""
        scrollZoom={false}
        onClick={onClick}
        cursor={cursor}
      >
        <GeolocateControl position="top-left" />
        <FullscreenControl position="top-left" />
        <NavigationControl position="top-left" />
        <ScaleControl />

        <Source id={sourceId} type="geojson" data={geojsonUrl}>
          <Layer
            id={layerId}
            type="fill"
            source={sourceId}
            paint={{
              "fill-color": [
                "case",
                ["==", ["get", "name"], "Austria"],
                "blue", // Color for Austria
                ["==", ["get", "name"], "Croatia"],
                "green", // Color for Croatia
                "gray", // Default color
              ],
              "fill-opacity": 0.5,
            }}
          />
        </Source>

        {pins}
      </Map>
    </div>
  );
};

export default MapNew;

无论我做什么，我都不能访问名称onClick，即使上色的逻辑有效:

所以，我希望当我点击一个有色人种的国家时，我会得到它的名字.