I have used circle marker to show places on a world map in react. How to add popup on circle marker to shows up the location when circle is clicked?

Question

I have used circle marker to show places on a world map in react. How to add popup on circle marker to show details when circle is clicked. Currently the code shows a interactive map with circle marker for locations and countries are highlighted when clicked on using tool tip

  import React, { memo } from "react";
  import classes from "./MapChart.module.css"
  import {
           ZoomableGroup,
           ComposableMap,
           Geographies,
           Geography,
           Marker,
       } from "react-simple-maps";

   import ReactTooltip from "react-tooltip";

//cities and their longitude and latitude

   const markers = [
   {
       markerOffset: -20,
       name: "Sao Paulo",
       coordinates: [-58.3816, -34.6307],
    },
   const geoUrl =
   "https://raw.githubusercontent.com/zcreativelabs/react-simple-maps/master/topojson- 
    maps/world-110m.json";

//creating interactive world map

   const MapChart = ({ setTooltipContent }) => {
   return (
    <>
        <ComposableMap data-tip="" projectionConfig={{scale: 200}}>
            <ZoomableGroup zoom = {2}>
                <Geographies geography={geoUrl}>
                    {({geographies}) =>
                        geographies.map(geo => (
                            <Geography
                                key={geo.rsmKey}
                                geography={geo}
                                onMouseEnter={() => {
                                    const {NAME} = geo.properties;
                                    setTooltipContent(`${NAME}`);
                                }}
                                onMouseLeave={() => {
                                    setTooltipContent("");
                                }}

//This is where the output to console occurs.

                                onClick={() => {
                                    const {NAME} = geo.properties;
                                    console.log(NAME);
                                }}
                                style={{
                                    default: {
                                        fill: "#D6D6DA",
                                        outline: "none"
                                    },
                                    hover: {
                                        fill: "#F53",
                                        outline: "none"
                                    },
                                    pressed: {
                                        fill: "#E42",
                                        outline: "none"
                                    }
                                }}
                            />
                        ))
                    }
                </Geographies>

//adding circle marker on the map

                {
                    markers.map(({name, coordinates, markerOffset})=>(
                        <Marker key ={name} coordinates={coordinates}>
                            <circle r={5} fill= "#F00" stroke= "#fff" strokeWidth={1}/>
                            <text textAnchor="middle"
                                  y={markerOffset}
                                  style={{fontFamily: "system-ui",fill: "#5D5A6D" }}
                            >
                                {name}
                            </text>


                        </Marker>
                    ))}

            </ZoomableGroup>
        </ComposableMap>
    </>
   );
};
export default memo(MapChart);