diff --git a/microsite/package.json b/microsite/package.json
index 720179093ae6ed..d0a184cb3b5455 100644
--- a/microsite/package.json
+++ b/microsite/package.json
@@ -36,9 +36,9 @@
     "clsx": "^1.1.1",
     "docusaurus-plugin-sass": "^0.2.3",
     "luxon": "^3.0.0",
-    "prism-react-renderer": "^1.3.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "prism-react-renderer": "^2.0.6",
+    "react": "^18.0.0",
+    "react-dom": "^18.2.0",
     "sass": "^1.57.1",
     "swc-loader": "^0.2.3"
   }
diff --git a/microsite/yarn.lock b/microsite/yarn.lock
index 34bc7e6e12dbcb..32b1b32404cc6c 100644
--- a/microsite/yarn.lock
+++ b/microsite/yarn.lock
@@ -3006,6 +3006,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/prismjs@npm:^1.26.0":
+  version: 1.26.0
+  resolution: "@types/prismjs@npm:1.26.0"
+  checksum: cd5e7a6214c1f4213ec512a5fcf6d8fe37a56b813fc57ac95b5ff5ee074742bfdbd2f2730d9fd985205bf4586728e09baa97023f739e5aa1c9735a7c1ecbd11a
+  languageName: node
+  linkType: hard
+
 "@types/prop-types@npm:*":
   version: 15.7.5
   resolution: "@types/prop-types@npm:15.7.5"
@@ -3766,9 +3773,9 @@ __metadata:
     js-yaml: ^4.1.0
     luxon: ^3.0.0
     prettier: ^2.6.2
-    prism-react-renderer: ^1.3.5
-    react: ^17.0.2
-    react-dom: ^17.0.2
+    prism-react-renderer: ^2.0.6
+    react: ^18.0.0
+    react-dom: ^18.2.0
     sass: ^1.57.1
     swc-loader: ^0.2.3
     typescript: ^4.9.4
@@ -9450,6 +9457,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prism-react-renderer@npm:^2.0.6":
+  version: 2.0.6
+  resolution: "prism-react-renderer@npm:2.0.6"
+  dependencies:
+    "@types/prismjs": ^1.26.0
+    clsx: ^1.2.1
+  peerDependencies:
+    react: ">=16.0.0"
+  checksum: d2202b79ddf01d308da3ba2f7f31a852fb0fb2e0290575d44e719af4c1d91fa913d04eb480fa3ba03e2d35d745ae806904270ffad00770511ec8bd80db67cb24
+  languageName: node
+  linkType: hard
+
 "prismjs@npm:^1.29.0":
   version: 1.29.0
   resolution: "prismjs@npm:1.29.0"
@@ -9690,16 +9709,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^17.0.2":
-  version: 17.0.2
-  resolution: "react-dom@npm:17.0.2"
+"react-dom@npm:^18.2.0":
+  version: 18.2.0
+  resolution: "react-dom@npm:18.2.0"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-    scheduler: ^0.20.2
+    scheduler: ^0.23.0
   peerDependencies:
-    react: 17.0.2
-  checksum: 1c1eaa3bca7c7228d24b70932e3d7c99e70d1d04e13bb0843bbf321582bc25d7961d6b8a6978a58a598af2af496d1cedcfb1bf65f6b0960a0a8161cb8dab743c
+    react: ^18.2.0
+  checksum: 7d323310bea3a91be2965f9468d552f201b1c27891e45ddc2d6b8f717680c95a75ae0bc1e3f5cf41472446a2589a75aed4483aee8169287909fcd59ad149e8cc
   languageName: node
   linkType: hard
 
@@ -9835,13 +9853,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^17.0.2":
-  version: 17.0.2
-  resolution: "react@npm:17.0.2"
+"react@npm:^18.0.0":
+  version: 18.2.0
+  resolution: "react@npm:18.2.0"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-  checksum: b254cc17ce3011788330f7bbf383ab653c6848902d7936a87b09d835d091e3f295f7e9dd1597c6daac5dc80f90e778c8230218ba8ad599f74adcc11e33b9d61b
+  checksum: 88e38092da8839b830cda6feef2e8505dec8ace60579e46aa5490fc3dc9bba0bd50336507dc166f43e3afc1c42939c09fe33b25fae889d6f402721dcd78fca1b
   languageName: node
   linkType: hard
 
@@ -10320,13 +10337,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.0":
+  version: 0.23.0
+  resolution: "scheduler@npm:0.23.0"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-  checksum: c4b35cf967c8f0d3e65753252d0f260271f81a81e427241295c5a7b783abf4ea9e905f22f815ab66676f5313be0a25f47be582254db8f9241b259213e999b8fc
+  checksum: d79192eeaa12abef860c195ea45d37cbf2bbf5f66e3c4dcd16f54a7da53b17788a70d109ee3d3dde1a0fd50e6a8fc171f4300356c5aee4fc0171de526bf35f8a
   languageName: node
   linkType: hard
 
diff --git a/packages/app/src/index.tsx b/packages/app/src/index.tsx
index b15bc4c1020d59..b4a20a210e1090 100644
--- a/packages/app/src/index.tsx
+++ b/packages/app/src/index.tsx
@@ -16,7 +16,9 @@
 
 import '@backstage/cli/asset-types';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(<App />);
\ No newline at end of file
diff --git a/packages/create-app/templates/default-app/packages/app/src/index.tsx b/packages/create-app/templates/default-app/packages/app/src/index.tsx
index b16aaf7cd2f1bd..a792a97c432f08 100644
--- a/packages/create-app/templates/default-app/packages/app/src/index.tsx
+++ b/packages/create-app/templates/default-app/packages/app/src/index.tsx
@@ -1,6 +1,8 @@
 import '@backstage/cli/asset-types';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(<App />);
\ No newline at end of file
diff --git a/packages/dev-utils/src/devApp/render.tsx b/packages/dev-utils/src/devApp/render.tsx
index 36e87855eda9eb..3c950859c6ec13 100644
--- a/packages/dev-utils/src/devApp/render.tsx
+++ b/packages/dev-utils/src/devApp/render.tsx
@@ -45,7 +45,7 @@ import {
 import { Box } from '@material-ui/core';
 import BookmarkIcon from '@material-ui/icons/Bookmark';
 import React, { ComponentType, ReactNode, PropsWithChildren } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { createRoutesFromChildren, Route } from 'react-router-dom';
 import { SidebarThemeSwitcher } from './SidebarThemeSwitcher';
 
@@ -240,7 +240,9 @@ export class DevAppBuilder {
       window.location.pathname = this.defaultPage;
     }
 
-    ReactDOM.render(<DevApp />, document.getElementById('root'));
+    const container = document.getElementById('root');
+    const root = createRoot(container);
+    root.render(<DevApp />);
   }
 }
 
@@ -254,4 +256,4 @@ export class DevAppBuilder {
  */
 export function createDevApp() {
   return new DevAppBuilder();
-}
+}
\ No newline at end of file
diff --git a/packages/techdocs-cli-embedded-app/src/index.tsx b/packages/techdocs-cli-embedded-app/src/index.tsx
index b15bc4c1020d59..b4a20a210e1090 100644
--- a/packages/techdocs-cli-embedded-app/src/index.tsx
+++ b/packages/techdocs-cli-embedded-app/src/index.tsx
@@ -16,7 +16,9 @@
 
 import '@backstage/cli/asset-types';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(<App />);
\ No newline at end of file
diff --git a/plugins/techdocs/src/reader/transformers/addSidebarToggle.ts b/plugins/techdocs/src/reader/transformers/addSidebarToggle.ts
index 789c9179d515b9..af200d81764e5b 100644
--- a/plugins/techdocs/src/reader/transformers/addSidebarToggle.ts
+++ b/plugins/techdocs/src/reader/transformers/addSidebarToggle.ts
@@ -17,7 +17,7 @@
 import type { Transformer } from './transformer';
 import MenuIcon from '@material-ui/icons/Menu';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 export const addSidebarToggle = (): Transformer => {
   return dom => {
@@ -33,7 +33,8 @@ export const addSidebarToggle = (): Transformer => {
     }
 
     const toggleSidebar = mkdocsToggleSidebar.cloneNode() as HTMLLabelElement;
-    ReactDOM.render(React.createElement(MenuIcon), toggleSidebar);
+    const root = createRoot(toggleSidebar);
+    root.render(React.createElement(MenuIcon));
     toggleSidebar.id = 'toggle-sidebar';
     toggleSidebar.title = 'Toggle Sidebar';
     toggleSidebar.classList.add('md-content__button');
@@ -42,4 +43,4 @@ export const addSidebarToggle = (): Transformer => {
     article?.prepend(toggleSidebar);
     return dom;
   };
-};
+};
\ No newline at end of file
diff --git a/plugins/techdocs/src/reader/transformers/copyToClipboard.tsx b/plugins/techdocs/src/reader/transformers/copyToClipboard.tsx
index 28a6c789b6927b..ddf8db29b12e56 100644
--- a/plugins/techdocs/src/reader/transformers/copyToClipboard.tsx
+++ b/plugins/techdocs/src/reader/transformers/copyToClipboard.tsx
@@ -15,7 +15,7 @@
  */
 
 import React, { useState, useCallback } from 'react';
-import ReactDom from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import {
   withStyles,
   Theme,
@@ -91,13 +91,13 @@ export const copyToClipboard = (theme: Theme): Transformer => {
       const text = code.textContent || '';
       const container = document.createElement('div');
       code?.parentElement?.prepend(container);
-      ReactDom.render(
+      const root = createRoot(container);
+      root.render(
         <ThemeProvider theme={theme}>
           <CopyToClipboardButton text={text} />
-        </ThemeProvider>,
-        container,
+        </ThemeProvider>
       );
     }
     return dom;
   };
-};
+};
\ No newline at end of file