diff --git a/packages/docusaurus-plugin-pwa/src/renderReloadPopup.tsx b/packages/docusaurus-plugin-pwa/src/renderReloadPopup.tsx
index 89a8cd984890..6935304e68cb 100644
--- a/packages/docusaurus-plugin-pwa/src/renderReloadPopup.tsx
+++ b/packages/docusaurus-plugin-pwa/src/renderReloadPopup.tsx
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import type {Props} from '@theme/PwaReloadPopup';
 
 const POPUP_CONTAINER_ID = 'pwa-popup-container';
@@ -23,6 +23,7 @@ const createContainer = () => {
 export function renderReloadPopup(props: Props): Promise<void> {
   const container = getContainer() ?? createContainer();
   return import('@theme/PwaReloadPopup').then(({default: ReloadPopup}) => {
-    ReactDOM.render(<ReloadPopup {...props} />, container);
+    const root = createRoot(container);
+    root.render(<ReloadPopup {...props} />);
   });
 }