React v18 upgrade

package.json

@@ -2,31 +2,34 @@
   "name": "editors-webapp",
   "version": "0.1.0",
   "private": true,
+  "resolutions": {
+    "@types/react": "18.0.3"
+  },
   "devDependencies": {
     "@types/react-email-editor": "^1.1.5",
     "eclint": "^2.8.1",
     "prettier": "^2.6.2"
   },
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/react": "^13.0.1",
     "@testing-library/user-event": "^14.1.0",
     "@types/history": "^5.0.0",
     "@types/jest": "^27.4.1",
     "@types/node": "^17.0.24",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
+    "@types/react": "^18.0.3",
+    "@types/react-dom": "^18.0.0",
     "@types/react-router-dom": "^5.3.3",
     "axios": "^0.26.1",
     "history": "^5.3.0",
-    "react": "^17.0.2",
+    "react": "^18.0.0",
     "react-cool-onclickoutside": "^1.7.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.0.0",
     "react-email-editor": "^1.5.0",
     "react-intl": "^5.24.8",
-    "react-query": "^3.34.19",
+    "react-query": "^4.0.0-beta.3",
     "react-router-dom": "^6.3.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "typescript": "^4.6.3",
     "web-vitals": "^2.1.4"
   },

src/index.tsx

@@ -1,5 +1,5 @@
 import { StrictMode } from "react";
-import { render } from "react-dom";
+import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import "./index.css";
 import { App } from "./components/App";
@@ -20,7 +20,11 @@ appSessionStateMonitor.start();
 
 const queryClient = new QueryClient();
 
-render(
+const container = document.getElementById(
+  appServices.appConfiguration.appElementId
+);
+const root = createRoot(container!);
+root.render(
   <StrictMode>
     <QueryClientProvider client={queryClient}>
       <BrowserRouter basename={appServices.appConfiguration.basename}>
@@ -33,8 +37,7 @@ render(
         </AppServicesProvider>
       </BrowserRouter>
     </QueryClientProvider>
-  </StrictMode>,
-  document.getElementById(appServices.appConfiguration.appElementId)
+  </StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function