diff --git a/packages/cra-template-typescript/template/src/index.tsx b/packages/cra-template-typescript/template/src/index.tsx
index ef2edf8ea3f..a3526f15591 100644
--- a/packages/cra-template-typescript/template/src/index.tsx
+++ b/packages/cra-template-typescript/template/src/index.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-ReactDOM.render(
+const rootElment = document.getElementById('root') as HTMLElement
+const root = ReactDOM.createRoot(rootElment);
+root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
 );
 
 // If you want to start measuring performance in your app, pass a function
diff --git a/packages/cra-template/template/src/index.js b/packages/cra-template/template/src/index.js
index ef2edf8ea3f..11671e39f2f 100644
--- a/packages/cra-template/template/src/index.js
+++ b/packages/cra-template/template/src/index.js
@@ -1,14 +1,15 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-ReactDOM.render(
+const rootElment = document.getElementById('root');
+const root = ReactDOM.createRoot(rootElment);
+root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
 );
 
 // If you want to start measuring performance in your app, pass a function