diff --git a/package.json b/package.json
index 9ce403ae31..c0ce173813 100644
--- a/package.json
+++ b/package.json
@@ -89,5 +89,8 @@
   "resolutions": {
     "@types/react": "18.0.5",
     "@types/react-dom": "18.0.1"
+  },
+  "dependencies": {
+    "react": "18"
   }
 }
diff --git a/packages/test-suite-cra/src/index.tsx b/packages/test-suite-cra/src/index.tsx
index 7150ef62f0..45b999151b 100644
--- a/packages/test-suite-cra/src/index.tsx
+++ b/packages/test-suite-cra/src/index.tsx
@@ -1,19 +1,20 @@
 import './index.css'
 
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 import App from './App'
 import reportWebVitals from './reportWebVitals'
 
-ReactDOM.render(
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(
 	<React.StrictMode>
 		<App />
-	</React.StrictMode>,
-	document.getElementById('root'),
+	</React.StrictMode>
 )
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals()
+reportWebVitals()
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 7eeb272633..65ef841025 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -21104,6 +21104,7 @@ __metadata:
     inquirer: ^9.1.4
     markdown-spellcheck: ^1.3.1
     npm-run-all: ^4.1.5
+    react: 18
     react-dnd: "workspace:^"
     react-dnd-examples: "workspace:^"
     react-dnd-html5-backend: "workspace:^"
@@ -21497,7 +21498,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:18.2.0, react@npm:^18.2.0":
+"react@npm:18, react@npm:18.2.0, react@npm:^18.2.0":
   version: 18.2.0
   resolution: "react@npm:18.2.0"
   dependencies: