I am using React-Simple-Maps to manipulate and render an SVG of a map (a chloropeth map). I am using React-Tooltip to display a tooltip over each constituency on the map, displaying their full names and an option for “more detail”. So far, I haven’t been able to render even the names, let alone a fully stylized div with the aforementioned details.

Using the documentation available on the sites of both respective libraries, I’ve ended up doing something like this (with no success). Here is the codesandbox link which I followed:
https://codesandbox.io/s/map-chart-with-tooltip-forked-42sldc?file=/src/index.js

The Map component code (note that on mouseEnter, i was able to log the names onto the console, but i dont know why its not setting up for the content of the tooltip, or if any thing else is an issue). Ignore the marker (you may comment it out if you wish to run/test the code).

const MapChart = ({
  setTooltipContent,
}: {
  setTooltipContent: (content: string) => void;
}) => {
  return (
    <div id='map' className=''>
      <ComposableMap className='stroke-black'>
        <Geographies
          geography={SgMap}
          fill='#D6D6DA'
          stroke='#FFFFFF'
          className=''
        >
          {({ geographies }) =>
            geographies.map((geo) => (
              <Geography
                key={geo.rsmKey}
                geography={geo}
                onMouseEnter={() => {
                  setTooltipContent(geo.properties.name);
                }}
                onMouseLeave={() => {
                  setTooltipContent('');
                }}
                 data-tip
                data-for='map'
                style={{
                  default: {
                    fill: '#D6D6DA',
                    outline: 'none',
                  },
                  hover: {
                    fill: '#F53',
                    outline: 'none',
                  },
                  pressed: {
                    fill: '#E42',
                    outline: 'none',
                  },
                }}
              />
            ))
          }
        </Geographies>
        {ConstituenciesNamesandCoordinates.map(({ name, coordinates }, i) => (
          <Marker key={i} coordinates={coordinates}>
            <text
              textAnchor='middle'
              y={-10}
              className='font-times text-[0.5rem] text-black'
              style={{
                userSelect: 'none',
                pointerEvents: 'none',
                fontWeight: 100,
              }}
            >
              {name}
            </text>
          </Marker>
        ))}
      </ComposableMap>
    </div>
  );
};

The code where i am trying to render the tooltip

import MapChart from "./MapComponent";


const MapSection=()=> {
  const [content, setContent] = useState("");
  return (
    <div>
      <MapChart setTooltipContent={setContent} />
      <Tooltip data-tooltip-id="map" content={content} float />
    </div>
  );
}


export default MapSection;

Any help would be much appreciated. The Sandbox version works btw, mine doesn’t for some reason