How to find the data associated with elements in a rendered map

I have a map that I’m trying to make interactive, so that when the user clicks on a particular district, it shows some data about that district(% of the population in x/y/z categories, population size, etc.). The dataset includes all of that data, as well as the geodata. However, after the map is rendered, I can’t find the data for the district in the event object. Below is how the map is structured (it’s in a React component):

function Map({ data, selectedDistricts }) {
  .
  .
  .

  const districtPathGenerator = d3.geoPath(projection)

  function handleClick(e) {
    console.log(e) // <-- how to display the data associated with the clicked-on district?
  }

  return (
    <div ref={ref}>
      <svg width="500px" height="450px">
        <g>
          {data.map((district) => {
            return (
              <path
                d={districtPathGenerator(district)}
                onClick={(e) => handleClick(e)}
              >
              </path>
            )
          })}
        </g>
      </svg>
    </div>
  )
}

>Solution :

try it

function Map({ data, selectedDistricts }) {
  .
  .
  .

  const districtPathGenerator = d3.geoPath(projection)

  function handleClick(e, district) {
    console.log(e, district) // <-- how to display the data associated with the clicked-on district?
  }

  return (
    <div ref={ref}>
      <svg width="500px" height="450px">
        <g>
          {data.map((district) => {
            return (
              <path
                d={districtPathGenerator(district)}
                onClick={(e) => handleClick(e, district)}
              >
              </path>
            )
          })}
        </g>
      </svg>
    </div>
  )
}