diff --git a/packages/app/src/components/header/header.tsx b/packages/app/src/components/header/header.tsx
index 82f0558ae9..1287ff72d6 100644
--- a/packages/app/src/components/header/header.tsx
+++ b/packages/app/src/components/header/header.tsx
@@ -37,10 +37,10 @@ type HeaderRightItemNames =
   | 'syncUser';
 
 const HeaderRightItems: Record<HeaderRightItemNames, ReactNode> = {
-  editorOptionMenu: <EditorOptionMenu />,
-  trashButtonGroup: <TrashButtonGroup />,
-  themeModeSwitch: <ThemeModeSwitch />,
-  syncUser: <SyncUser />,
+  editorOptionMenu: <EditorOptionMenu key="editorOptionMenu" />,
+  trashButtonGroup: <TrashButtonGroup key="trashButtonGroup" />,
+  themeModeSwitch: <ThemeModeSwitch key="themeModeSwitch" />,
+  syncUser: <SyncUser key="syncUser" />,
 };
 
 export const Header = ({