ReactTooltip.hide doesn't hide tooltip instantly

Question

I'm trying to create a tooltip using react-tooltip with a close button. According to the documentation, I need to use ReactTooltip.hide but it doesn't seem to work. It hides the tooltip only if I'm moving the cursor out of the tooltip, but not instantly.

Using React 17.0.2, react-tooltip 4.2.21.

Here's a quick CodeSandbox example to see my issue: https://codesandbox.io/s/hidden-star-er2u66

Answer 1

A quick fix can be found here

const [tooltip, showTooltip] = useState(true);

<>
 {tooltip && <ReactTooltip effect="solid" />}
 <p
   data-tip="hello world"
   onMouseEnter={() => showTooltip(true)}
   onMouseLeave={() => {
     showTooltip(false);
     setTimeout(() => showTooltip(true), 50);
   }}
 />
</>

Closing question.

Answer 2

I solved this issue by removing React.StrictMode in index.js file

Answer 3

Try to remove the

<React.StrictMode>
    
  </React.StrictMode>

form the index.js and volaa!! you are done.