diff --git a/packages/console/src/index.tsx b/packages/console/src/index.tsx
index 7227c3f1b..8d87a3b4f 100644
--- a/packages/console/src/index.tsx
+++ b/packages/console/src/index.tsx
@@ -1,8 +1,9 @@
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import ReactModal from 'react-modal';
 
 import App from './App';
 
 const app = document.querySelector('#app');
+const root = app && createRoot(app);
 ReactModal.setAppElement('#app');
-ReactDOM.render(<App />, app);
+root?.render(<App />);
diff --git a/packages/demo-app/src/index.tsx b/packages/demo-app/src/index.tsx
index 8b71713e2..166d1f277 100644
--- a/packages/demo-app/src/index.tsx
+++ b/packages/demo-app/src/index.tsx
@@ -1,8 +1,9 @@
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 // eslint-disable-next-line import/no-unassigned-import
 import '@logto/shared/declaration';
 
 import App from './App';
 
 const app = document.querySelector('#app');
-ReactDOM.render(<App />, app);
+const root = app && createRoot(app);
+root?.render(<App />);
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
index 7d442778b..2fff32634 100644
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -1,6 +1,7 @@
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import App from './App';
 
 const app = document.querySelector('#app');
-ReactDOM.render(<App />, app);
+const root = app && createRoot(app);
+root?.render(<App />);