diff --git a/web/src/components/DMChat.tsx b/web/src/components/DMChat.tsx
index ba3f99d..61bf94c 100644
--- a/web/src/components/DMChat.tsx
+++ b/web/src/components/DMChat.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, useCallback, memo } from "react";
+import { useEffect, useRef, useState, useCallback, memo, Fragment } from "react";
 import { useParams } from "react-router-dom";
 import { useConversationStore, type ConversationMessage } from "../stores/conversation.ts";
 import { useAuthStore } from "../stores/auth.ts";
@@ -330,9 +330,8 @@ export function DMChat() {
           const lastReadId = id ? convStates[id] : undefined;
           const showDivider = lastReadId && msg.id === lastReadId && i < messages.length - 1;
           return (
-            <>
+            <Fragment key={msg.id}>
               <DMMessageItem
-                key={msg.id}
                 msg={msg}
                 onAddReaction={handleAddReaction}
                 activeReactionMessageId={activeReactionMessageId}
@@ -349,7 +348,7 @@ export function DMChat() {
                   <span className="flex-1 border-t border-gb-red"></span>
                 </div>
               )}
-            </>
+            </Fragment>
           );
         })}
         <div ref={bottomRef} />