diff --git a/packages/recorder/src/index.tsx b/packages/recorder/src/index.tsx
index 9d55f8608a..5956eab725 100644
--- a/packages/recorder/src/index.tsx
+++ b/packages/recorder/src/index.tsx
@@ -17,11 +17,10 @@
 import '@web/common.css';
 import { applyTheme } from '@web/theme';
 import '@web/third_party/vscode/codicon.css';
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom/client';
 import { Main } from './main';
 
 (async () => {
   applyTheme();
-  ReactDOM.render(<Main/>, document.querySelector('#root'));
+  ReactDOM.createRoot(document.querySelector('#root')!).render(<Main/>);
 })();
diff --git a/packages/recorder/src/main.tsx b/packages/recorder/src/main.tsx
index 5980716d1e..2f7ea3ac4c 100644
--- a/packages/recorder/src/main.tsx
+++ b/packages/recorder/src/main.tsx
@@ -30,12 +30,14 @@ export const Main: React.FC = ({
   window.playwrightSetSources = setSources;
   window.playwrightSetPaused = setPaused;
   window.playwrightUpdateLogs = callLogs => {
-    const newLog = new Map<string, CallLog>(log);
-    for (const callLog of callLogs) {
-      callLog.reveal = !log.has(callLog.id);
-      newLog.set(callLog.id, callLog);
-    }
-    setLog(newLog);
+    setLog(log => {
+      const newLog = new Map<string, CallLog>(log);
+      for (const callLog of callLogs) {
+        callLog.reveal = !log.has(callLog.id);
+        newLog.set(callLog.id, callLog);
+      }
+      return newLog;
+    });
   };
 
   window.playwrightSourcesEchoForTest = sources;