diff --git a/site/source/entry-en.tsx b/site/source/entry-en.tsx
index 8ce3dd7f4..4e68b587f 100644
--- a/site/source/entry-en.tsx
+++ b/site/source/entry-en.tsx
@@ -1,6 +1,6 @@
 import { I18nProvider } from '@react-aria/i18n'
 import { withProfiler } from '@sentry/react'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 import App from './App'
 import i18next from './locales/i18n'
@@ -30,5 +30,8 @@ if (!import.meta.env.SSR) {
 		// eslint-disable-next-line no-console
 		console.error(err)
 	)
-	render(<AppEnWithProfiler />, document.querySelector('#js'))
+
+	const container = document.querySelector('#js') as Element
+	const root = createRoot(container)
+	root.render(<AppEnWithProfiler />)
 }
diff --git a/site/source/entry-fr.tsx b/site/source/entry-fr.tsx
index c63c00a9c..353aecaa1 100644
--- a/site/source/entry-fr.tsx
+++ b/site/source/entry-fr.tsx
@@ -1,6 +1,6 @@
 import { I18nProvider } from '@react-aria/i18n'
 import { withProfiler } from '@sentry/react'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 import App from './App'
 import i18next from './locales/i18n'
@@ -20,5 +20,7 @@ if (!import.meta.env.SSR) {
 		// eslint-disable-next-line no-console
 		console.error(err)
 	)
-	render(<AppFrWithProfiler />, document.querySelector('#js'))
+	const container = document.querySelector('#js') as Element
+	const root = createRoot(container)
+	root.render(<AppFrWithProfiler />)
 }