Error on `injectStyles`: "Failed to execute 'appendChild' on 'Node': Only one element on document allowed."

Possibly related: https://github.com/wwayne/react-tooltip/issues/669

DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.
    at ReactTooltip.injectStyles (webpack-internal:///cpGi:1195:17)
    at ReactTooltip.injectStyles (webpack-internal:///wssv:717:25)
    at ReactTooltip.componentDidMount (webpack-internal:///cpGi:1149:12)
    at ReactTooltip.componentDidMount (webpack-internal:///wssv:707:123)
    at commitLifeCycles (webpack-internal:///fxOa:20659:24)
    at commitLayoutEffects (webpack-internal:///fxOa:23422:7)
    at HTMLUnknownElement.callCallback (webpack-internal:///fxOa:3946:14)
    at Object.invokeGuardedCallbackDev (webpack-internal:///fxOa:3995:16)
    at invokeGuardedCallback (webpack-internal:///fxOa:4057:31)
    at commitRootImpl (webpack-internal:///fxOa:23147:9) "
    at AppContainer (eval at ES6ProxyComponentFactory (webpack-internal:///wssv), <anonymous>:14:7)
    at HotExportedRoot (eval at ES6ProxyComponentFactory (webpack-internal:///wssv), <anonymous>:14:7)"

[mumarm45]

Getting the same error while running the test.

[jryd]

@sumthief I am getting the same error as @ayusshar and can provide a reproducible example:

Example.js

import React from 'react';
import ReactTooltip from 'react-tooltip';

const Example = () => {
  return <div>
    <p className="text-xs font-semibold uppercase tracking-wide text-gray-500 mb-2">Example</p>
    <div className="flex flex-wrap -m-8">
        <div className="p-8" data-testid="example" data-tip="This is a test <br/> and it doesn't work">
          <p className="text-xs text-gray-700">Example paragraph</p>
        </div>
    </div>
    <ReactTooltip multiline={true}/>
  </div>
};

export default Example;

Example.test.js

import React from 'react';
import { render } from '@testing-library/react';
import Example from './Example';
import ReactTooltip from 'react-tooltip';

describe('Example', () => {
  it('can render', () => {
    render(<Example />);
  });

  it('can render standalone', () => {
    render(<ReactTooltip multiline={true} />);
  });
});

Or as one test file all together:

import React from 'react';
import { render } from '@testing-library/react';
import ReactTooltip from 'react-tooltip';

const Example = () => {
  return <div>
    <p className="text-xs font-semibold uppercase tracking-wide text-gray-500 mb-2">Example</p>
    <div className="flex flex-wrap -m-8">
      <div className="p-8" data-testid="example" data-tip="This is a test <br/> and it doesn't work">
        <p className="text-xs text-gray-700">Example paragraph</p>
      </div>
    </div>
    <ReactTooltip multiline={true}/>
  </div>
};

describe('Example', () => {
  it('can render', () => {
    render(<Example />);
  });

  it('can render standalone', () => {
    render(<ReactTooltip multiline={true} />);
  });
});