diff --git a/packages/sheets-conditional-formatting-ui/src/controllers/cf.menu.controller.ts b/packages/sheets-conditional-formatting-ui/src/controllers/cf.menu.controller.ts
index a727d42fbdae..8d6ad40360f1 100644
--- a/packages/sheets-conditional-formatting-ui/src/controllers/cf.menu.controller.ts
+++ b/packages/sheets-conditional-formatting-ui/src/controllers/cf.menu.controller.ts
@@ -16,7 +16,7 @@
 
 import type { IDisposable } from '@wendellhu/redi';
 import { Inject, Injector } from '@wendellhu/redi';
-import { Disposable, IUniverInstanceService, LifecycleStages, LocaleService, OnLifecycle, UniverInstanceType } from '@univerjs/core';
+import { Disposable, IUniverInstanceService, LifecycleStages, LocaleService, OnLifecycle, Tools, UniverInstanceType } from '@univerjs/core';
 import type { MenuConfig } from '@univerjs/ui';
 import { ComponentManager, IMenuService, ISidebarService } from '@univerjs/ui';
 import type { IConditionFormattingRule } from '@univerjs/sheets-conditional-formatting';
@@ -62,6 +62,7 @@ export class ConditionalFormattingMenuController extends Disposable {
             children: {
                 label: CF_PANEL_KEY,
                 rule,
+                key: Tools.generateRandomId(4),
             },
             onClose: () => this._sidebarDisposable = null,
         };