React Tooltip doesn't close on mouse leave

Question

I have created this map with react-simple-maps and react-tooltip. I forked from a project but my ideal scenario here is

On click of the state, the tooltip shows up, but on mouse leave, the tooltip won't disappear. Instead, it stays there, and if. you hover over another state, the info changes on the tooltip but it doesn't move to the new hovered state.

Here is a sandbox link https://codesandbox.io/s/tsdw84

Thanks for the help in advance!!

Answer 1

I have solved it by

function Example(){ 
const [isToolTipMounted, setIsToolTipMounted] = useState<boolean>(false);  
return(
<p 
data-for={"infoTip"} 
data-tip="React-tooltip"
onMouseEnter={handleMouseEnter}                             
onMouseLeave={handleMouseLeave}>TEST</p>
{isToolTipMounted && <ReactTooltip id={"infoTip"}/>}
)  
} 

Answer 2

@Hafiz proposed a simple answer to a (similar post). Sharing here in case anyone lands on this post and hasn't found that one.

Removing

<React.StrictMode>
    
</React.StrictMode>

from index.js solved the problem for me.

It's unclear why this worked -- I didn't have any warnings in my console from StrictMode. I have a comment asking for clarification in that other post, and I'll update here if I receive a response.

The OP from that other post also appeared to solve the problem with a combination of useState, onMouseEnter, and onMouseLeave within the element that binds the tooltip.