How to customize react-typescript-datamaps Library?

Question

I am currently using the react-typescript-datamaps library in a ReactJS project and facing challenges in customizing the font style and size for country names displayed on the map. Despite efforts, I haven't been able to find a suitable approach to make the necessary changes.

Here's an example of the relevant component:

import React, { useEffect, useState } from "react";
import { DataMapsWrapper } from "react-typescript-datamaps";
import { useDispatch, useSelector } from "react-redux";
import AttackHelper from "./AttackHelper";
import BlastHelper from "./BlastHelper";

import BubblesConfig from "./BubblesConfig";
import {  getThreatsMapData } from "../store/dataSlice";


const MapView = () => {
  const dispatch = useDispatch();
  const [index, setIndex] = useState(0);
  const [dstloc, setDstloc] = useState();
  const [srcloc, setSrcloc] = useState();
  const [arc, setArc] = useState([]);
  const [blast, setBlast] = useState([]);

  const loading = useSelector((state) => state.threatsMap.data.loading);
  const data = useSelector((state) => state.threatsMap.data.threatsMapData);

  const intervalValue = useSelector(
    (state) => state.threatsMap.state.intervalValue
  );

  const getThreatsMap = () => {
    dispatch(getThreatsMapData({  }));
  };

  useEffect(() => {
    getThreatsMap();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    const interval = setInterval(() => {
      if (loading || !data[index]) return;

      const eventData = data[index];

      const srcAttribute = eventData.Attributes.find(
        (item) => item.type === "ip-src"
      );
      const dstAttribute = eventData.Attributes.find(
        (item) => item.type === "ip-dst"
      );
      const IPv4Attribute = eventData.Attributes.find(
        (item) => item.type === "IPv4"
      );

      // Check if at least one of the attributes exists
      if (srcAttribute || dstAttribute || IPv4Attribute) {
        if (srcAttribute) {
          // setSrc([srcAttribute.value]);
          const srcLoc = srcAttribute.geo_localisation[0];
          setSrcloc({ country: srcLoc.country_name, ...srcLoc });
        }

        if (dstAttribute) {
          // setDst([dstAttribute.value]);
          const dstLoc = dstAttribute.geo_localisation[0];
          setDstloc({ country: dstLoc.country_name, ...dstLoc });
        }

        if (IPv4Attribute && IPv4Attribute.type === "IPv4") {
          // setIPv4([IPv4Attribute.value]);

          const ipv4Loc = IPv4Attribute.geo_localisation[0];
          const blast = BlastHelper({
            latitude: ipv4Loc.latitude,
            longitude: ipv4Loc.longitude,
            country: ipv4Loc.country_name || "Unknown",
            animate: true,
            highlighted: ipv4Loc.country_name || "Unknown",
          });
          setBlast([blast]);
        }

        const executeAttack = async () => {
          if (srcAttribute && dstAttribute && srcloc && dstloc) {
            const attack = AttackHelper(srcloc, dstloc);
            setArc((prevArc) => [...prevArc.slice(-3), attack]);
            setBlast([]);
          } else if (srcAttribute && srcloc) {
            const blast = BlastHelper(srcloc);
            setBlast([blast]);
          } else if (dstAttribute && dstloc) {
            const blast = BlastHelper(dstloc);
            setBlast([blast]);
          } else {
            // Handle other cases as needed
          }
        };

        executeAttack();
      }

      setIndex((prev) => (prev + 1) % data.length);
    }, intervalValue);

    return () => clearInterval(interval);
  }, [index, data, loading, intervalValue]);


  return (
    <div className={`map-container`}>
      <div className={`flex  items-center justify-between`}>
        <div>
          <DataMapsWrapper
            projection="mercator"
            responsive
            attacks={arc}
            bubbles={blast}
            geographyConfig={{
              popupOnHover: true,
              highlightOnHover: true,
              highlightFillColor: "#FC8D59", 
              highlightBorderColor: "#FC8D59", 
              borderColor: "#364d53",
              borderWidth: 0.5,
              dataType: "topojson",
              dataUrl: "/map/map.topojson",
              highlightBorderWidth: 3, 
              highlightBorderOpacity: 1, 
              highlightFillOpacity: 0.5, 
            }}
            fills={{
              defaultFill: "#101518",
              MAJOR: "#306596",
              MEDIUM: "#0fa0fa",
              MINOR: "#bada55",
            }}
            bubblesConfig={BubblesConfig}
          />
        </div>
      </div>
    </div>
  );
};

export default MapView;

Screenshot: The screenshot illustrating the current state:

I'm seeking guidance on how to customize the font size and style for the country names displayed on the map. Any insights or code snippets would be greatly appreciated.

Willardwillcox