diff --git a/.yarn/cache/react-dom-npm-17.0.2-f551215af1-0b3836131a.zip b/.yarn/cache/react-dom-npm-17.0.2-f551215af1-0b3836131a.zip
deleted file mode 100644
index 15f0acf0db..0000000000
Binary files a/.yarn/cache/react-dom-npm-17.0.2-f551215af1-0b3836131a.zip and /dev/null differ
diff --git a/.yarn/cache/react-dom-npm-18.3.1-a805663f38-3f4b73a3aa.zip b/.yarn/cache/react-dom-npm-18.3.1-a805663f38-3f4b73a3aa.zip
new file mode 100644
index 0000000000..bb1d88d36f
Binary files /dev/null and b/.yarn/cache/react-dom-npm-18.3.1-a805663f38-3f4b73a3aa.zip differ
diff --git a/.yarn/cache/react-npm-17.0.1-98658812fc-23ada2f8fe.zip b/.yarn/cache/react-npm-17.0.1-98658812fc-23ada2f8fe.zip
deleted file mode 100644
index ff1444df90..0000000000
Binary files a/.yarn/cache/react-npm-17.0.1-98658812fc-23ada2f8fe.zip and /dev/null differ
diff --git a/.yarn/cache/react-npm-17.0.2-99ba37d931-ece60c31c1.zip b/.yarn/cache/react-npm-17.0.2-99ba37d931-ece60c31c1.zip
deleted file mode 100644
index d6a9074f62..0000000000
Binary files a/.yarn/cache/react-npm-17.0.2-99ba37d931-ece60c31c1.zip and /dev/null differ
diff --git a/.yarn/cache/react-npm-18.3.1-af38f3c1ae-261137d3f3.zip b/.yarn/cache/react-npm-18.3.1-af38f3c1ae-261137d3f3.zip
new file mode 100644
index 0000000000..d3a9d8e78e
Binary files /dev/null and b/.yarn/cache/react-npm-18.3.1-af38f3c1ae-261137d3f3.zip differ
diff --git a/.yarn/cache/scheduler-npm-0.20.2-90beaecfba-898917fa47.zip b/.yarn/cache/scheduler-npm-0.20.2-90beaecfba-898917fa47.zip
deleted file mode 100644
index cf0c554435..0000000000
Binary files a/.yarn/cache/scheduler-npm-0.20.2-90beaecfba-898917fa47.zip and /dev/null differ
diff --git a/.yarn/cache/scheduler-npm-0.23.2-6d1dd9c2b7-e8d68b89d1.zip b/.yarn/cache/scheduler-npm-0.23.2-6d1dd9c2b7-e8d68b89d1.zip
new file mode 100644
index 0000000000..a341e177fc
Binary files /dev/null and b/.yarn/cache/scheduler-npm-0.23.2-6d1dd9c2b7-e8d68b89d1.zip differ
diff --git a/package.json b/package.json
index a29036a3cc..c51b9ee042 100644
--- a/package.json
+++ b/package.json
@@ -127,8 +127,8 @@
     "office-ui-fabric-core": "^11.1.0",
     "playwright": "^1.49.1",
     "prettier": "3.2.5",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "regenerator-runtime": "^0.14.1",
     "rollup": "^4.12.0",
     "rollup-plugin-postcss": "^4.0.2",
diff --git a/packages/mgt-react/package.json b/packages/mgt-react/package.json
index 0536239077..e188b67ffb 100644
--- a/packages/mgt-react/package.json
+++ b/packages/mgt-react/package.json
@@ -42,8 +42,8 @@
     "wc-react": "^0.5.1"
   },
   "peerDependencies": {
-    "react": "^17.0.1 || ^18.0.0",
-    "react-dom": "^17.0.1 || ^18.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/mgt-react/src/Mgt.ts b/packages/mgt-react/src/Mgt.ts
index 8cd877ef4c..7c00643fa4 100644
--- a/packages/mgt-react/src/Mgt.ts
+++ b/packages/mgt-react/src/Mgt.ts
@@ -6,7 +6,7 @@
  */
 
 import React, { ReactNode, ReactElement } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Wc, WcProps, WcTypeProps } from 'wc-react';
 import { customElementHelper, TemplateRenderedData } from '@microsoft/mgt-element';
 
@@ -103,7 +103,8 @@ export class Mgt extends Wc {
 
     if (template) {
       template = React.cloneElement(template, { dataContext });
-      ReactDOM.render(template, element);
+      const root = createRoot(element);
+      root.render(template);
     }
   };
 
diff --git a/packages/mgt-spfx-utils/package.json b/packages/mgt-spfx-utils/package.json
index a6f58e0742..0e92d62008 100644
--- a/packages/mgt-spfx-utils/package.json
+++ b/packages/mgt-spfx-utils/package.json
@@ -39,7 +39,7 @@
   "dependencies": {
     "@microsoft/mgt-components": "*",
     "@types/react": "17.0.45",
-    "react": "17.0.1"
+    "react": "^18.0.0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/samples/react-contoso/package.json b/samples/react-contoso/package.json
index 4ffc6a4cc4..4d8a3fd77a 100644
--- a/samples/react-contoso/package.json
+++ b/samples/react-contoso/package.json
@@ -17,8 +17,8 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "eslint-config-react-app": "^7.0.1",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-router-dom": "^6.15.0",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
diff --git a/yarn.lock b/yarn.lock
index 0d75830565..d78d0933f6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5164,7 +5164,7 @@ __metadata:
   dependencies:
     "@microsoft/mgt-components": "npm:*"
     "@types/react": "npm:17.0.45"
-    react: "npm:17.0.1"
+    react: "npm:^18.0.0"
   languageName: unknown
   linkType: soft
 
@@ -20604,8 +20604,8 @@ __metadata:
     "@types/react-dom": "npm:^17.0.0"
     "@vitejs/plugin-react": "npm:^4.2.1"
     eslint-config-react-app: "npm:^7.0.1"
-    react: "npm:^17.0.0"
-    react-dom: "npm:^17.0.0"
+    react: "npm:^18.0.0"
+    react-dom: "npm:^18.0.0"
     react-router-dom: "npm:^6.15.0"
     typescript: "npm:^4.9.5"
     vite: "npm:^5.1.4"
@@ -20614,16 +20614,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"react-dom@npm:^17.0.0, react-dom@npm:^17.0.1":
-  version: 17.0.2
-  resolution: "react-dom@npm:17.0.2"
+"react-dom@npm:^18.0.0":
+  version: 18.3.1
+  resolution: "react-dom@npm:18.3.1"
   dependencies:
     loose-envify: "npm:^1.1.0"
-    object-assign: "npm:^4.1.1"
-    scheduler: "npm:^0.20.2"
+    scheduler: "npm:^0.23.2"
   peerDependencies:
-    react: 17.0.2
-  checksum: 10/0b3836131a64da8b1c2c852cc28b09c21a738c33c7a8d6021ac20d5619d753c8ee5fff8f97c95f2fc33053e44c2cbce9657453e21c55900164e6e0c3e955e826
+    react: ^18.3.1
+  checksum: 10/3f4b73a3aa083091173b29812b10394dd06f4ac06aff410b74702cfb3aa29d7b0ced208aab92d5272919b612e5cda21aeb1d54191848cf6e46e9e354f3541f81
   languageName: node
   linkType: hard
 
@@ -20773,23 +20772,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:17.0.1":
-  version: 17.0.1
-  resolution: "react@npm:17.0.1"
+"react@npm:^18.0.0":
+  version: 18.3.1
+  resolution: "react@npm:18.3.1"
   dependencies:
     loose-envify: "npm:^1.1.0"
-    object-assign: "npm:^4.1.1"
-  checksum: 10/23ada2f8fe9a73460cb849b71ee5bf7ae4d1f856ebf4c3c322546de06a58db9ad69306539ae3ea07056d9408697ff683066cabcea55ecdcbeacbf4bf46a90ad2
-  languageName: node
-  linkType: hard
-
-"react@npm:^17.0.0, react@npm:^17.0.1":
-  version: 17.0.2
-  resolution: "react@npm:17.0.2"
-  dependencies:
-    loose-envify: "npm:^1.1.0"
-    object-assign: "npm:^4.1.1"
-  checksum: 10/ece60c31c1d266d132783aaaffa185d2e4c9b4db144f853933ec690cee1e0600c8929a1dd0a9e79323eea8e2df636c9a06d40f6cfdc9f797f65225433e67f707
+  checksum: 10/261137d3f3993eaa2368a83110466fc0e558bc2c7f7ae7ca52d94f03aac945f45146bd85e5f481044db1758a1dbb57879e2fcdd33924e2dde1bdc550ce73f7bf
   languageName: node
   linkType: hard
 
@@ -21509,8 +21497,8 @@ __metadata:
     office-ui-fabric-core: "npm:^11.1.0"
     playwright: "npm:^1.49.1"
     prettier: "npm:3.2.5"
-    react: "npm:^17.0.1"
-    react-dom: "npm:^17.0.1"
+    react: "npm:^18.0.0"
+    react-dom: "npm:^18.0.0"
     regenerator-runtime: "npm:^0.14.1"
     rollup: "npm:^4.12.0"
     rollup-plugin-postcss: "npm:^4.0.2"
@@ -21662,13 +21650,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scheduler@npm:^0.20.2":
-  version: 0.20.2
-  resolution: "scheduler@npm:0.20.2"
+"scheduler@npm:^0.23.2":
+  version: 0.23.2
+  resolution: "scheduler@npm:0.23.2"
   dependencies:
     loose-envify: "npm:^1.1.0"
-    object-assign: "npm:^4.1.1"
-  checksum: 10/898917fa475386953d998add9107c04bf2c335eee86172833995dee126d12a68bee3c29edbd61fa0bcbcb8ee511c422eaab23b86b02f95aab26ecfaed8df5e64
+  checksum: 10/e8d68b89d18d5b028223edf090092846868a765a591944760942b77ea1f69b17235f7e956696efbb62c8130ab90af7e0949bfb8eba7896335507317236966bc9
   languageName: node
   linkType: hard