How to make an onClick event on interactive map Leaflet? - reactjs

Question

I created interactive map. It work quite good but I cannot send currentId or Name of volveship I click. I get error that this property is undefined and I do not know how to fix this. I use this date https://github.com/ppatrzyk/polska-geojson/blob/master/wojewodztwa/wojewodztwa-min.geojson?short_path=898b1e2
import React, { useState } from 'react';
import {
MapContainer,
TileLayer,
Polygon
} from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import { statesData } from './data';
import './App.css';
const center = [52.237049, 21.017532];
export default function App() {
const [currentID, setCurrentID] = useState();
return (
<>
<MapContainer
center={center}
zoom={6}
style={{ width: '100vw', height: '100vh' }}
>
<TileLayer
url="https://api.maptiler.com/maps/basic/tiles.json?key=MyKey"
attribution='© MapTiler © OpenStreetMap contributors'
/>
{
statesData.features.map((state) => {
const coordinates = state.geometry.coordinates[0].map((item) => [item[1], item[0]]);
return (<Polygon
pathOptions={{
fillColor: '#ae4a84',
fillOpacity: 0.7,
weight: 2,
opacity: 1,
dashArray: 3,
color: 'white'
}}
positions={coordinates}
eventHandlers={{
mouseover: (e) => {
const layer = e.target;
layer.setStyle({
dashArray: "",
fillColor: "#003263",
fillOpacity: 0.7,
weight: 2,
opacity: 1,
color: "white",
})
},
mouseout: (e) => {
const layer = e.target;
layer.setStyle({
fillOpacity: 0.7,
weight: 2,
dashArray: "3",
color: 'white',
fillColor: '#ae4a84'
});
},
click: (e) => {
setCurrentID(e.target.id) }
}}
/>)
})
}
</MapContainer>
</>
);
}