Fix ts typing error

package.json

@@ -6,17 +6,16 @@
   "dependencies": {
     "@craco/craco": "^6.4.3",
     "@testing-library/jest-dom": "^5.16.3",
-    "@testing-library/react": "^12.1.4",
+    "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.4.1",
     "@types/node": "^16.11.26",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
+    "@types/react": "^17.0.46",
     "i18next": "^21.8.9",
     "i18next-browser-languagedetector": "^6.1.4",
     "i18next-http-backend": "^1.4.1",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react-dom": "^18.2.0",
     "react-i18next": "^11.17.1",
     "react-scripts": "5.0.0",
     "typescript": "^4.6.3",
@@ -48,6 +47,7 @@
     ]
   },
   "devDependencies": {
+    "@types/react-dom": "^17.0.17",
     "gh-pages": "^4.0.0"
   }
 }

src/index.tsx

@@ -1,10 +1,10 @@
-import { createRoot } from "react-dom/client";
-
 import "./i18n";
 import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 
+const createRoot = require("react-dom/client").createRoot;
+
 const container = document.getElementById("root");
 const root = createRoot(container!);
 root.render(<App />);

tsconfig.json

@@ -14,7 +14,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "typeRoots": ["node_modules/@types"]
   },
   "include": ["src"],
   "extends": "./tsconfig.paths.json"