diff --git a/packages-ui/roosterjs-react/lib/emoji/components/EmojiPane.tsx b/packages-ui/roosterjs-react/lib/emoji/components/EmojiPane.tsx
index 07965962acd..aee2375e147 100644
--- a/packages-ui/roosterjs-react/lib/emoji/components/EmojiPane.tsx
+++ b/packages-ui/roosterjs-react/lib/emoji/components/EmojiPane.tsx
@@ -225,7 +225,10 @@ const EmojiPane = React.forwardRef(function EmojiPaneFunc(
         [mode, currentFamily, currentEmojiList]
     );
 
-    const getEmojiIconId = React.useCallback((emoji: Emoji) => `${listId}-${emoji.key}`, [listId]);
+    const getEmojiIconId = React.useCallback(
+        (emoji: Emoji) => (emoji ? `${listId}-${emoji.key}` : ''),
+        [listId]
+    );
 
     React.useImperativeHandle(
         ref,