Why is my ReactTooltip changing padding size after revisiting a webpage?

Question

When just visiting my main webpage, the tooltip when hovering over the countries in my react-simple-maps map looks pretty normal: tooltip

However, after going to a different webpage, and then promptly returning to the map-containing webpage (same URL), the tooltip's padding changes: changed tooltip

Here is the code behind my tooltip:

<ReactTooltip>
  <div className="bg-gray-800 text-white rounded p-[8px]">
    <div className="text-[16px] font-bold">
      {Name}
    </div>
    <div className="text-[14px]">
      No information available right now
    </div>
  </div>
</ReactTooltip>

I assume the issue lies in server/client-side rendering, since the strange border (which I assume to be the p-[8px] only appears after re-entering the webpage). However, I am still inexperienced. Any ways to fix this?

Thanks!

I tried putting the className directly into , but that resulted in a clear background... Then I just tried moving different stylings around but nothing seemed to do the trick.