Marker not clickable to show tooltip in Mobile

[manojsethi]

I have a simple composable map with marker. Map works fine in browser and also works fine when checked in responsive mobile view on Laptop but when check on a real mobile instead of marker tooltip the geography gets clicked and tooltip doesn't show up.

import TimezoneContext from "@/app/context/AppContext";
import { useContext } from "react";
import {
  ComposableMap,
  Geographies,
  Geography,
  Marker,
} from "react-simple-maps";
import { Tooltip } from "react-tooltip";
import TimezoneAnalogClock from "../TimezoneAnalogClock";

const geoUrl =
  "https://raw.githubusercontent.com/deldersveld/topojson/master/world-countries.json";
const TimezoneMap = () => {
  const { state } = useContext(TimezoneContext);

  return (
    <>
      <ComposableMap
        projection="geoMercator"
        focusable={false}
        projectionConfig={{
          scale: 120,
          center: [0, 40],
        }}
        height={525}
        style={{ width: "100%", height: "auto" }}
      >
        <Geographies geography={geoUrl}>
          {({ geographies }) =>
            geographies.map((geo) => (
              <Geography
                focusable={false}
                style={{
                  default: {
                    outline: "none",
                  },
                  hover: {
                    outline: "none",
                  },
                  pressed: {
                    outline: "none",
                  },
                }}
                tabIndex={-1}
                fill="#c3b6fd"
                stroke="#000000"
                key={geo.rsmKey}
                geography={geo}
              />
            ))
          }
        </Geographies>
        {state.timezones.map((data, i) => (
          <a
            key={`marker_${i}`}
            className="timezone-clock outline-none"
            data-tooltip-content={data.name}
            data-tooltip-country={data.countryName}
          >
            <Marker
              style={{
                default: {
                  outline: "none",
                },
                hover: {
                  outline: "none",
                },
                pressed: {
                  outline: "none",
                },
              }}
              key={`marker_${i}`}
              coordinates={[data.latLng[1], data.latLng[0]]}
            >
              <circle r={3} fill="#F00" />
            </Marker>
          </a>
        ))}
      </ComposableMap>
      <Tooltip
        anchorSelect=".timezone-clock"
        className="z-20"
        render={({ content, activeAnchor }) => (
          <TimezoneAnalogClock
            country={activeAnchor?.getAttribute("data-tooltip-country") || ""}
            timezone={content ?? ""}
          />
        )}
      />
    </>
  );
};
export default TimezoneMap;