Why is my react-tooltip sometimes displaying on the parent element?

Question

I've made a covid related travel map here: Where Can We Go Now

It's a static react JS website, billy basic with create-react-app. It uses amongst other things the excellent React Simple Maps (kudos to the creator) and react-tooltip.

Expected behaviour:

Locally the tooltip works fine when tested with npm run start

I move my mouse over a country and the tooltip displays some relevant information approximately where my mouse is on the map.

The Problem:

. . . once published with npm run build sort of works but strange things happen.

Please follow link to website to observe, but in short, if the sea (i.e. an area that isn't a country - so not defined by an svg in the topojson) is clicked then the tooltip is place at the top centre of the whole map itself.

Some bits of relevant code:

Index.js (snippet):

  const [content, setContent] = useState("");
  return (
    <div><h1> Where can we go on holiday ?* </h1>
      <MapChart setTooltipContent={setContent}/>
      <ReactTooltip html={true}>{content}</ReactTooltip>
    </div>
  );
}

MapChart.js (snippet):

    return (
      <div>
        <p><small>*Right now in the UK: {data.headlineAdviceNow}   Last updated at {updateString}</small></p>
      <ComposableMap
        
        projectionConfig={{
          rotate: [-40, -30, 10],
          scale: 1600
        }}
        width={mapWidth}
        height={mapHeight}
        style={{ maxWidth: "100%", height: "80vh", background: "#b3b3b3", borderStyle: "solid", borderColor: "white", margin: 0.5,
        borderRadius: 20 }}
      >
        <ZoomableGroup zoom={zoom} center={center} translateExtent={[
          [0, 0],
          [mapWidth, mapHeight]
        ]} maxZoom={15} data-tip="">
        <Sphere stroke="#E4E5E6" strokeWidth={0.5} />
        <Graticule stroke="#E4E5E6" strokeWidth={0.2} />
        
        {!loading && (<Geographies geography={geoUrl}>
            {({ geographies }) =>
              geographies.map((geo) => {
                const d = data.countries.find((s) => s.country.iso_a3 === geo.properties.ISO_A3);
                return (
                  <Geography
                    key={geo.rsmKey}
                    geography={geo}
                    style={{
                      default: {
                        outline: "none",
                        stroke: "grey",
                        strokeWidth: "1",
                        strokeLinecap: "butt",
                        fill: d ? colorScale(d[attr]) : "#F5F4F6"
                      },
                      hover: {
                        outline: "none",
                        stroke: "black",
                        strokeWidth: "3",
                        strokeLinecap: "butt",
                        fill: d ? colorScale(d[attr]) : "#F5F4F6"
                      },
                      pressed: {
                        outline: "none"
                      }
                    }}
                    onMouseEnter={() => {
                      const NAME = geo.properties.NAME;
                      const travelIndex = d ? d["indexDescription"] : "Unknown";
                      //const border = d ? d["borderStatusString"] : "Unknown";
                      const returnStatus = d ? (fromCountry==="GBR" ? d["ukCategory"] : "TBC") : "Unknown";
                      const vaccinePc = d ? d.vaccineData["total_vaccinations_per_hundred"] + "%" : "NK";
                      const arrival = (() => {try{ return d["restrictionsFrom"][data["iomKeys"].indexOf(fromCountry)].split("-") } catch {return [4,""]}});
                      const arrivalLevel = rstrctLkup[arrival()[0]]["short"]
                      //const arvlRtns = arrival()[1].length===0 ? arrival()[1] : arrival()[1].split(",")
                      //var text =""
                      //var i;
                      //for (i = 0; i < arvlRtns.length; i++) {
                      //  if (data["restrictionDefs"][arvlRtns[i]]) {
                      //  if (i===0) {text="<br />Arrival Details:<br />"}
                      //  text += data["restrictionDefs"][arvlRtns[i]] + "<br>";
                      //}}
                      
                      setTooltipContent(`<b>${NAME.toUpperCase()}:</b> ${travelIndex}<br /><p style="text-align: left"><b>RISK FACTORS</b><br />Vaccinated: ${vaccinePc}<br /><br /><b>CURRENT RESTRICTIONS</b><br />Entry: ${arrivalLevel}<br />Return: ${returnStatus}</p>`);
                    }}
                    onMouseLeave={() => {
                      setTooltipContent("");
                    }}
                  />
                );
              })
            }
          </Geographies>
        )}
        </ZoomableGroup>
      </ComposableMap>
      </div>
    );
  };  

export default memo(MapChart);

What I've tried:

Variations of setting tooltip position, and moving where and what data-tip="" is. Also, banging head on wall.

Answer 1

I was inaccurate in my question, so didn't provide relevant details that was the source of the problem.

I publish with github actions and this was the fix:

yarn install --frozen-lockfile

The frozen lockfile was the key to make sure I was using the exact versions of relevant packages as I had been testing locally. I'd erroneously suggested I was using npm.