diff --git a/package-lock.json b/package-lock.json
index bcc1c096e32..a5861ee6ce2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "create-react-app-main",
+  "name": "create-react-app",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
@@ -30029,8 +30029,8 @@
         "react-scripts": "bin/react-scripts.js"
       },
       "devDependencies": {
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2"
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -30048,6 +30048,40 @@
         }
       }
     },
+    "packages/react-scripts/node_modules/react": {
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.0.0.tgz",
+      "integrity": "sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==",
+      "dev": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "packages/react-scripts/node_modules/react-dom": {
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.0.0.tgz",
+      "integrity": "sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==",
+      "dev": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.21.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0"
+      }
+    },
+    "packages/react-scripts/node_modules/scheduler": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz",
+      "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==",
+      "dev": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
     "packages/react-scripts/node_modules/semver": {
       "version": "7.3.5",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
@@ -47469,10 +47503,10 @@
         "postcss-normalize": "^10.0.1",
         "postcss-preset-env": "^7.0.1",
         "prompts": "^2.4.2",
-        "react": "^17.0.2",
+        "react": "^18.0.0",
         "react-app-polyfill": "^3.0.0",
         "react-dev-utils": "^12.0.0",
-        "react-dom": "^17.0.2",
+        "react-dom": "^18.0.0",
         "react-refresh": "^0.11.0",
         "resolve": "^1.20.0",
         "resolve-url-loader": "^4.0.0",
@@ -47488,6 +47522,34 @@
         "workbox-webpack-plugin": "^6.4.1"
       },
       "dependencies": {
+        "react": {
+          "version": "18.0.0",
+          "resolved": "https://registry.npmjs.org/react/-/react-18.0.0.tgz",
+          "integrity": "sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==",
+          "dev": true,
+          "requires": {
+            "loose-envify": "^1.1.0"
+          }
+        },
+        "react-dom": {
+          "version": "18.0.0",
+          "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.0.0.tgz",
+          "integrity": "sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==",
+          "dev": true,
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "scheduler": "^0.21.0"
+          }
+        },
+        "scheduler": {
+          "version": "0.21.0",
+          "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz",
+          "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==",
+          "dev": true,
+          "requires": {
+            "loose-envify": "^1.1.0"
+          }
+        },
         "semver": {
           "version": "7.3.5",
           "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
diff --git a/packages/cra-template-typescript/template.json b/packages/cra-template-typescript/template.json
index af71a913d1a..db2d4761047 100644
--- a/packages/cra-template-typescript/template.json
+++ b/packages/cra-template-typescript/template.json
@@ -6,8 +6,8 @@
       "@testing-library/user-event": "^13.2.1",
       "@types/jest": "^27.0.1",
       "@types/node": "^16.7.13",
-      "@types/react": "^17.0.20",
-      "@types/react-dom": "^17.0.9",
+      "@types/react": "^18.0.0",
+      "@types/react-dom": "^18.0.0",
       "typescript": "^4.4.2",
       "web-vitals": "^2.1.0"
     },
diff --git a/packages/cra-template-typescript/template/src/index.tsx b/packages/cra-template-typescript/template/src/index.tsx
index ef2edf8ea3f..032464fb6ec 100644
--- a/packages/cra-template-typescript/template/src/index.tsx
+++ b/packages/cra-template-typescript/template/src/index.tsx
@@ -1,14 +1,16 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-ReactDOM.render(
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function
diff --git a/packages/cra-template/template/src/index.js b/packages/cra-template/template/src/index.js
index ef2edf8ea3f..d563c0fb10b 100644
--- a/packages/cra-template/template/src/index.js
+++ b/packages/cra-template/template/src/index.js
@@ -1,14 +1,14 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-ReactDOM.render(
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index 99b82701669..8c08aabc7c3 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -77,8 +77,8 @@
     "workbox-webpack-plugin": "^6.4.1"
   },
   "devDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "optionalDependencies": {
     "fsevents": "^2.3.2"