diff --git a/dev/index.js b/dev/index.js
index 94ff54a..fda81d0 100644
--- a/dev/index.js
+++ b/dev/index.js
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { serverFunctions } from '../src/client/utils/serverFunctions.ts';
 
 const { FILENAME, PORT } = process.env;
@@ -58,4 +58,6 @@ const DevServer = () => {
   );
 };
 
-ReactDOM.render(<DevServer />, document.getElementById('index'));
+const container = document.getElementById('index');
+const root = createRoot(container);
+root.render(<DevServer />);
diff --git a/src/client/dialog-demo-bootstrap/index.js b/src/client/dialog-demo-bootstrap/index.js
index 846e94a..107375c 100644
--- a/src/client/dialog-demo-bootstrap/index.js
+++ b/src/client/dialog-demo-bootstrap/index.js
@@ -1,7 +1,9 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import SheetEditor from './components/SheetEditor';
 
 import './styles.css';
 
-ReactDOM.render(<SheetEditor />, document.getElementById('index'));
+const container = document.getElementById('index');
+const root = createRoot(container);
+root.render(<SheetEditor />);
diff --git a/src/client/dialog-demo/index.js b/src/client/dialog-demo/index.js
index 846e94a..107375c 100644
--- a/src/client/dialog-demo/index.js
+++ b/src/client/dialog-demo/index.js
@@ -1,7 +1,9 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import SheetEditor from './components/SheetEditor';
 
 import './styles.css';
 
-ReactDOM.render(<SheetEditor />, document.getElementById('index'));
+const container = document.getElementById('index');
+const root = createRoot(container);
+root.render(<SheetEditor />);
diff --git a/src/client/sidebar-about-page/index.js b/src/client/sidebar-about-page/index.js
index db5a895..800211a 100644
--- a/src/client/sidebar-about-page/index.js
+++ b/src/client/sidebar-about-page/index.js
@@ -1,5 +1,7 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import About from './components/About';
 
-ReactDOM.render(<About />, document.getElementById('index'));
+const container = document.getElementById('index');
+const root = createRoot(container);
+root.render(<About />);