diff --git a/packages/mgt-chat/src/utils/mentions.tsx b/packages/mgt-chat/src/utils/mentions.tsx
index c3448d932f..3e162ab22d 100644
--- a/packages/mgt-chat/src/utils/mentions.tsx
+++ b/packages/mgt-chat/src/utils/mentions.tsx
@@ -4,6 +4,8 @@ import { ChatMessageMention, User } from '@microsoft/microsoft-graph-types';
 import { GraphChatClient } from 'src/statefulClient/StatefulGraphChatClient';
 import { Mention } from '@azure/communication-react';
 
+const buildKey = (mention: Mention) => `${mention?.id}-${mention?.displayText}`;
+
 export const renderMGTMention = (chatState: GraphChatClient) => {
   return (mention: Mention, defaultRenderer: (mention: Mention) => JSX.Element): JSX.Element => {
     let render: JSX.Element = defaultRenderer(mention);
@@ -30,7 +32,7 @@ export const renderMGTMention = (chatState: GraphChatClient) => {
         </Person>
       );
     }
-    render = <>{render}&nbsp;</>;
+    render = <span key={buildKey(mention)}>{render}&nbsp;</span>;
     return render;
   };
 };