Using `visible` and `interactive` props together throws an error

When I try to use visible for controlling when the popover shows and interactive together throws an error. there seem to be in this part of code

    // The popper element needs to exist on the DOM before its position can be
    // updated as Popper needs to read its dimensions
    if (!parentNode.contains(popper)) {
      parentNode.appendChild(popper);
    }

createTippy.ts:717 Uncaught TypeError: Cannot read property 'contains' of null
    at mount (createTippy.ts:717)
    at Object.show (createTippy.ts:1003)
    at Tippy.js:154
    at commitHookEffectListMount (react-dom.development.js:20573)
    at commitLifeCycles (react-dom.development.js:20634)
    at commitLayoutEffects (react-dom.development.js:23426)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at commitRootImpl (react-dom.development.js:23151)
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at commitRoot (react-dom.development.js:22990)
    at performSyncWorkOnRoot (react-dom.development.js:22329)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at flushPassiveEffectsImpl (react-dom.development.js:23620)
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushPassiveEffects (react-dom.development.js:23447)
    at flushDiscreteUpdates (react-dom.development.js:22356)
    at flushDiscreteUpdatesIfNeeded (react-dom.development.js:3768)
    at dispatchDiscreteEvent (react-dom.development.js:5886)

[atomiks]

I don’t really know what the issue is but I can say that interactive will append the tippy to the reference’s parentNode. So if that changes somehow, it might break. A suggestion is to use the appendTo prop to append it to a constant element, like the root element of your app (note: implement keyboard focus etc. though).

        appendTo={() => document.querySelector('#root')}

[joeldarling]

I’m actually having this same issue. Oddly enough, it works fine in the browser (in Storybook) with no errors, but fails when I run Jest Storyshots. My setup is identical to @sharno, except visible is set to true by default, and then toggled off via a close button: