How to set ComposableMap not-focusable?

Question

I'm trying to make a map that will show the name of the country when you hover your cursor. For this I am using react-simple-map with react-tooltip:

function OnHoverMap() {
  const [content, setContent] = useState("");


    return (
        <div>
          <Map setTooltipContent={setContent} />
          <ReactTooltip>{content}</ReactTooltip>
        </div>
    )
}

const Map = ({ setTooltipContent }) => {
  return (
    <>
      <ComposableMap data-tip="" projectionConfig={{ scale: 200 }}>
        <ZoomableGroup>
          <Geographies geography={geoUrl}>
            {({ geographies }) =>
              geographies.map(geo => (
                <Geography
                  key={geo.rsmKey}
                  geography={geo}
                  onMouseEnter={() => {
                    const { NAME } = geo.properties;
                    setTooltipContent(`${NAME}`);
                  }}
                  onMouseLeave={() => {
                    setTooltipContent("");
                  }}
                  style={{
                    default: {
                      fill: "#D6D6DA",
                      outline: "none"
                    },
                    hover: {
                      fill: "#F53",
                      outline: "none"
                    },
                    pressed: {
                      fill: "#E42",
                      outline: "none"
                    }
                  }}
                />
              ))
            }
          </Geographies>
        </ZoomableGroup>
      </ComposableMap>
    </>
  );
};

This works fine, but there is a problem when zooming and moving the map - the focus shifts to the overall map (ComposableMap), and the panel with country name appear above the map, not over the country:

On react-simple-maps website mentions, what is not possible to set data-tip on Geography directly. Is there a way to solve this problem? Does it help if I make ComposableMap non-focusable?

Answer 1

Instead of adding "data-tip" to ComposableMap, add it to the outer div which is holding your Map and ReactTooltip.