Unable to use specific React version in a Jupyter Widget - reactjs

Question

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:
Install the cookiecutter as described in the README.
Install react and react-dom via jlpm/yarn add react#18.2.0 react-dom#18.2.0.
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>;
};
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"

Answer 1

If you need to change to a specific version of React, you can run this in the terminal:
npm install --save react#18.2.0

Answer 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
}
}
}