diff --git a/client/HelpCentrePage.ts b/client/HelpCentrePage.ts
index 241ec6c43..bbd464946 100644
--- a/client/HelpCentrePage.ts
+++ b/client/HelpCentrePage.ts
@@ -2,7 +2,7 @@ import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 import * as Sentry from '@sentry/browser';
 import 'ophan-tracker-js/build/ophan.manage-my-account';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { HelpCentrePage } from './components/helpCentre/HelpCentrePage';
 
 declare let WEBPACK_BUILD: string;
@@ -15,5 +15,6 @@ if (typeof window !== 'undefined' && window.guardian && window.guardian.dsn) {
 	});
 }
 
-const element = document.getElementById('app');
-render(HelpCentrePage, element);
+const element = document.getElementById('app') as HTMLElement;
+const root = createRoot(element);
+root.render(HelpCentrePage);
diff --git a/client/MMAPage.ts b/client/MMAPage.ts
index e9f66e91c..a48da8089 100644
--- a/client/MMAPage.ts
+++ b/client/MMAPage.ts
@@ -2,7 +2,7 @@ import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 import * as Sentry from '@sentry/browser';
 import 'ophan-tracker-js/build/ophan.manage-my-account';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { MMAPage } from './components/mma/MMAPage';
 
 declare let WEBPACK_BUILD: string;
@@ -15,5 +15,6 @@ if (typeof window !== 'undefined' && window.guardian && window.guardian.dsn) {
 	});
 }
 
-const element = document.getElementById('app');
-render(MMAPage, element);
+const element = document.getElementById('app') as HTMLElement;
+const root = createRoot(element);
+root.render(MMAPage);