How to load geojson data on React google map api and detect user click

Question

i am implementing @react-google-maps/api package to draw google map on my React application, Now i have loaded geoJson its working fine. Now the requirement is i need to check whether the user click inside the geoJson data or outside and show that area detail.

import React, { useState, useCallback } from "react";
import { GoogleMap, LoadScript } from "@react-google-maps/api";
import Areas from "./GEOJSON.json";
const containerStyle = {
  width: "80%",
  height: "70vh",
};
const GOOGLE_API_KEY = MY_KEY;
function MyComponent() {
  const [map, setMap] = useState(null);

  const onLoad = useCallback(function callback(map) {
    setMap(map);
    map.data.addGeoJson(Areas);
  }, []);

  const onUnmount = useCallback(function callback(map) {
    setMap(null);
  }, []);

  const center = {
    lat: 25.2858687,
    lng: 55.3281742,
  };

  const onClick = (e) => {
    console.log("clickk", e);
  };

  return (
    <React.Fragment>
      <LoadScript
        id="script-loader"
        googleMapsApiKey={GOOGLE_API_KEY}
        language="en"
        region="us"
        libraries={["drawing", "visualization", "geometry", "places"]}
      >
        <GoogleMap
          mapContainerClassName="App-map"
          zoom={12}
          version="weekly"
          on
          mapContainerStyle={containerStyle}
          center={center}
          onLoad={onLoad}
          onUnmount={onUnmount}
          onClick={onClick}
        ></GoogleMap>
      </LoadScript>
    </React.Fragment>
  );
}

export default React.memo(MyComponent);