diff --git a/packages/theme/hooks/useCodeSandbox.ts b/packages/theme/hooks/useCodeSandbox.ts
index c73ea69..23c2a3d 100644
--- a/packages/theme/hooks/useCodeSandbox.ts
+++ b/packages/theme/hooks/useCodeSandbox.ts
@@ -102,15 +102,14 @@ function getCSBData(
 **/
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client'
 ${CSSDeps.map(({ css }) => `import '${css}';`).join('\n')}
 import App from './App';
 ${opts.extra ? `${opts.extra}\n` : '\n'}
 
-ReactDOM.render(
-  <App />,
-  document.querySelector('#root'),
-);`,
+const container = document.querySelector('#root')
+const root = createRoot(container)
+root.render(<App />)`,
   };
 
   // append other imported local files
diff --git a/packages/theme/hooks/useStackBlitz.ts b/packages/theme/hooks/useStackBlitz.ts
index bad6f4e..68f5e2b 100644
--- a/packages/theme/hooks/useStackBlitz.ts
+++ b/packages/theme/hooks/useStackBlitz.ts
@@ -69,15 +69,14 @@ function getStackblitzData(
 **/
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client'
 ${CSSDeps.map(({ css }) => `import '${css}';`).join('\n')}
 import App from './App';
 ${opts.extra ? `${opts.extra}\n` : '\n'}
 
-ReactDOM.render(
-  <App />,
-  document.querySelector('#root'),
-);`,
+const container = document.querySelector('#root')
+const root = createRoot(container)
+root.render(<App />)`,
   };
 
   // append other imported local files