chore: update react and react-dom to 18

packages/web/package.json

@@ -24,8 +24,8 @@
     "luxon": "^2.3.1",
     "mui-color-input": "^2.0.0",
     "notistack": "^3.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-hook-form": "^7.45.2",
     "react-intl": "^5.20.12",
     "react-json-tree": "^0.16.2",

packages/web/src/index.jsx

@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import ThemeProvider from 'components/ThemeProvider';
 import IntlProvider from 'components/IntlProvider';
 import ApolloProvider from 'components/ApolloProvider';
@@ -10,7 +10,11 @@ import Router from 'components/Router';
 import LiveChat from 'components/LiveChat/index.ee';
 import routes from 'routes';
 import reportWebVitals from './reportWebVitals';
-ReactDOM.render(
+
+const container = document.getElementById('root');
+const root = createRoot(container);
+
+root.render(
   <Router>
     <SnackbarProvider>
       <AuthenticationProvider>
@@ -30,7 +34,6 @@ ReactDOM.render(
       </AuthenticationProvider>
     </SnackbarProvider>
   </Router>,
-  document.getElementById('root'),
 );
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))