Position of the React-tooltip coming at the bottom of the map- React tooltip/ JS

Question

I'm trying to display the country name on hover using simple-map react with react tooltip. I'm able to see the text somewhere at the bottom of the map and not at the position where I hover.

my app.js

import {Tooltip as ReactTooltip } from "react-tooltip";
function App() {
  const [content, setContent] = useState("");
  return (
    <div className="App">
      <MapChart setTooltipContent={setContent} />

      <ReactTooltip  backgroundColor="#ed0b70"
        textColor="black"
        id="ePost"
        place="top"
        effect="solid"
        position="absolute"
        overridePosition = {() => {return { left: 30, top: -40 };}}>{content}
      </ReactTooltip>
    </div>
  );
}

Marker component:

 <Marker key={index} coordinates={[marker.LONGITUDE, marker.LATITUDE]}}
    
                     onMouseEnter={() => {
                        setTooltipContent(`${CODE}`);
                      }}
                       onMouseLeave={() => {
                        setTooltipContent("");
                      }}
                      >
                      <circle r={10} fill="#BE8AED" 
                          style={{cursor: "pointer"}}
                          />
                      </Marker>

how else I can position the tooltip?