diff --git a/website/src/components/Messages/MessageWithChildren.tsx b/website/src/components/Messages/MessageWithChildren.tsx
index 3b6f8649..70d6c318 100644
--- a/website/src/components/Messages/MessageWithChildren.tsx
+++ b/website/src/components/Messages/MessageWithChildren.tsx
@@ -60,13 +60,8 @@ export function MessageWithChildren(props: MessageWithChildrenProps) {
         renderRecursive ? (
           <HStack spacing={8} alignItems="start" justifyContent="center">
             {children.map((item, idx) => (
-              <Box flex="1">
-                <MessageWithChildren
-                  id={item.id}
-                  depth={depth ? depth + 1 : 1}
-                  maxDepth={maxDepth}
-                  key={`recursiveMessageWChildren_${idx}`}
-                />
+              <Box flex="1" key={`recursiveMessageWChildren_${idx}`}>
+                <MessageWithChildren id={item.id} depth={depth ? depth + 1 : 1} maxDepth={maxDepth} />
               </Box>
             ))}
           </HStack>