diff --git a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
index c3359bdf5..ee9d1c623 100644
--- a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
+++ b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
@@ -408,6 +408,7 @@ export const Message = ({
             case 'text':
               return (
                 <TextContent
+                  key={i}
                   api={api}
                   fontSize={1}
                   lineHeight={'20px'}
@@ -415,10 +416,11 @@ export const Message = ({
                 />
               );
             case 'code':
-              return <CodeContent content={content} />;
+              return <CodeContent key={i} content={content} />;
             case 'url':
               return (
                 <Box
+                  key={i}
                   flexShrink={0}
                   fontSize={1}
                   lineHeight='20px'
@@ -455,6 +457,7 @@ export const Message = ({
               const first = (i) => (i === 0);
               return (
                 <Mention
+                  key={i}
                   first={first(i)}
                   group={group}
                   scrollWindow={scrollWindow}
diff --git a/pkg/interface/src/views/apps/chat/components/content/text.js b/pkg/interface/src/views/apps/chat/components/content/text.js
index 3e2d4065a..c434a965f 100644
--- a/pkg/interface/src/views/apps/chat/components/content/text.js
+++ b/pkg/interface/src/views/apps/chat/components/content/text.js
@@ -91,7 +91,7 @@ const MessageMarkdown = React.memo((props) => {
   }, []);
 
   return lines.map((line, i) => (
-    <>
+    <React.Fragment key={i}>
       {i !== 0 && <Row height={2} />}
       <ReactMarkdown
         {...rest}
@@ -123,7 +123,7 @@ const MessageMarkdown = React.memo((props) => {
           ]
         ]}
       />
-    </>
+    </React.Fragment>
   ));
 });