Unable to use specific React version in a Jupyter Widget

I'm trying to write a Jupyter Widget that uses react based on this cookiecutter. I specifically need to use a certain version of react. However, even when installing a specific version, after building the widget, a different version is used in the jupyterlab frontend. The react version that is installed in the node_modules folder is the version that I want to use and no other module has react as a dependency. In the node_modules folder, there is also no trace of a different react version to be found.

Specifically, I want to use react 18.2.0. The version that I get by logging React.version in the frontend is react 17.0.2. Obviously, I am not able to use React 18 features like useId which results in an error.

How can I use a different version of react? And where does this other react version 17.0.2 come from?

Reproduce:

1. Install the cookiecutter as described in the README.
2. Install react and react-dom via jlpm/yarn add react@18.2.0 react-dom@18.2.0.
3. Add a simple React component in a new file:

import React from 'react';

export const SimpleComponent = () => {
  console.log('React.version:', React.version);
  return <div>Simple Test</div>;
};

4. Render the react component in the render() function of the view in index.ts:

render() {
  this.component = React.createElement(SimpleComponent);
  ReactDOM.render(this.component, this.el);
}

Console shows: "React.version: 17.0.2"

Thanks to krassowski for giving me the link to the answer!

In my package.json, I added two entries for react and react-dom to sharedPackages so that I get:

  "jupyterlab": {
    "extension": "lib/plugin",
    "outputDir": "testproject/labextension/",
    "sharedPackages": {
      "@jupyter-widgets/base": {
        "bundled": false,
        "singleton": true
      },
      "react": {
        "bundled": true,
        "singleton": true
      },
      "react-dom": {
        "bundled": true,
        "singleton": true
      }
    }
  }