React 18: "VIDEOJS: WARN: The element supplied is not included in the DOM"

[osmarbento-AWS]

Description

I'm trying to migrate my app to react 18, as described in https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html
But after the upgrade the playerjs is not loaded in the DOM anymore.

Steps to reproduce

Explain in detail the exact steps necessary to reproduce the issue.

1. create a new react app
   npx create-react-app my-app

2. Change the index.js to Create root as per react version 18

  import ReactDOM from "react-dom/client";
  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );

2. Implement videojs as per https://videojs.com/guides/react/

Results:

Browser responds:
"VIDEOJS: WARN: The element supplied is not included in the DOM"

Expected

videojs loaded dispose()

Actual

Please describe what actually happened.

Error output

Additional Information

Please include any additional information necessary here. Including the following:

versions

videojs 1.18.1

node v16.11.1

npm 8.5.0

react 18

What browser are you using?
Chrome

What operating system are you using?
macOS

[welcome]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[mister-ben]

Dupe of #7746, appreciate comment on the possible approach in the comment there.