I am working on a nextjs app, i mostly work on back-end and database stuff, so advance front-end frameworks is new territory for me so i am sorry in advance if my question sounds like a slightly silly question. I have been given a task to create a pop up window that would show analytics of some data.

so the app uses google-maps-react-markers, i need to perform some sort of analysis on a shaded region on a map for this it must have a popup window when a user clicks on it.

import type { NextPageWithLayout } from '@/types';
import { NextSeo } from 'next-seo';
import RootLayout from '@/layouts/_root-layout';
import Farms from '@/components/farms/farms';
import GoogleMapReact from 'google-map-react';
import { useState } from 'react';
import { properties } from '@/data/static/properties';
import { Close } from '@/components/icons/close';
import { InfoIcon } from '@/components/icons/info-icon';
import Accordion from 'react-bootstrap/Accordion';
import PriceChart from '@/components/ui/chats/prop-price-chart';

import 'bootstrap/dist/css/bootstrap.min.css';
import GoogleMap from 'google-maps-react-markers';

const city_data = properties

 <GoogleMap
          apiKey="SECRET KEY"
          defaultCenter={defaultProps.center}
          defaultZoom={defaultProps.zoom}
          mapMinHeight="100vh"
          onGoogleApiLoaded={({ map, maps }) => handleApiLoaded(map, maps)}
        >

const handleApiLoaded = (map, maps) => {
    city_data
      ?.filter((e) => e.type == 'arial_location')
      ?.map((e) => {
          var townAreaPolygon = new maps.Polygon({
              paths: e.poligon,
              strokeColor: '#0E82DF',
              strokeOpacity: 0.8,
              strokeWeight:2,
              fillColor: '#0E82DF',
              fillOpacity: 0.35,
              indexID: e.id,
              
            }

          )
     townAreaPolygon.setMap(map);`

now this piece of code causes a region in the area to be colored blue, like this picture the blue shaded region was drawn my handleApiLoaded function.

Now lets suppose that i click the shaded region how do i create a pop up and how do i get the city_data variable avaliable in that local context so that i can easily perform some analysis on it.

I tried to ask the same question in chatGPT to no avail, i just need a simple popup on a shaded region. I need information on exactly how those popup works and why could i do it with simple
addEventHandler like in vanilla js?