diff --git a/apps/meteor/client/startup/appRoot.tsx b/apps/meteor/client/startup/appRoot.tsx
index 8feb63f0e806d..301100e9ef316 100644
--- a/apps/meteor/client/startup/appRoot.tsx
+++ b/apps/meteor/client/startup/appRoot.tsx
@@ -1,5 +1,5 @@
 import React, { StrictMode } from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import AppRoot from '../views/root/AppRoot';
 
@@ -16,10 +16,10 @@ const createContainer = (): Element => {
 };
 
 const container = createContainer();
+const root = createRoot(container);
 
-render(
+root.render(
 	<StrictMode>
 		<AppRoot />
-	</StrictMode>,
-	container,
-);
+	</StrictMode>
+);
\ No newline at end of file
diff --git a/packages/uikit-playground/src/main.tsx b/packages/uikit-playground/src/main.tsx
index 9188772b0c50a..755683ee5382c 100644
--- a/packages/uikit-playground/src/main.tsx
+++ b/packages/uikit-playground/src/main.tsx
@@ -1,16 +1,17 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import '@rocket.chat/icons/dist/rocketchat.css';
 
 import './index.css';
 import App from './App';
 import { Provider } from './Context';
 
-ReactDOM.render(
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(
   <React.StrictMode>
     <Provider>
       <App />
     </Provider>
-  </React.StrictMode>,
-  document.getElementById('root'),
-);
+  </React.StrictMode>
+);
\ No newline at end of file