diff --git a/src/layouts/default/header/components/user-dropdown/DropMenuItem.vue b/src/layouts/default/header/components/user-dropdown/DropMenuItem.vue
index 30a77e339..2354fac4a 100644
--- a/src/layouts/default/header/components/user-dropdown/DropMenuItem.vue
+++ b/src/layouts/default/header/components/user-dropdown/DropMenuItem.vue
@@ -1,14 +1,14 @@
 <template>
   <Menu.Item :key="itemKey">
     <span class="flex items-center">
-      <Icon :icon="icon" class="mr-1" />
-      <span>{{ text }}</span>
+      <Icon :icon="props.icon" class="mr-1" />
+      <span>{{ props.text }}</span>
     </span>
   </Menu.Item>
 </template>
 <script lang="ts" setup>
   import { Menu } from 'ant-design-vue';
-  import { computed, getCurrentInstance } from 'vue';
+  import { computed, getCurrentInstance, useAttrs } from 'vue';
   import Icon from '@/components/Icon/Icon.vue';
   import { propTypes } from '@/utils/propTypes';
 
@@ -16,11 +16,14 @@
 
   const props = defineProps({
     // eslint-disable-next-line
-    key: propTypes.string,
     text: propTypes.string,
     icon: propTypes.string,
   });
 
+  const attrs = useAttrs();
+
   const instance = getCurrentInstance();
-  const itemKey = computed(() => props.key || instance?.vnode?.props?.key);
+  const itemKey = computed(
+    () => (attrs.key || instance?.vnode?.props?.key) as string | number | undefined,
+  );
 </script>