From 67851af66024fd9f638f6a36e215a97451913e7a Mon Sep 17 00:00:00 2001
From: metacode22 <alohajune22@gmail.com>
Date: Sun, 1 Sep 2024 15:43:11 +0900
Subject: [PATCH] feat: preserve original keys of children elements

---
 .../react/react/src/components/Separated/Separated.tsx    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react/react/src/components/Separated/Separated.tsx b/packages/react/react/src/components/Separated/Separated.tsx
index 58098bd4..d200df33 100644
--- a/packages/react/react/src/components/Separated/Separated.tsx
+++ b/packages/react/react/src/components/Separated/Separated.tsx
@@ -1,6 +1,6 @@
 /** @tossdocs-ignore */
 /** @jsxImportSource react */
-import { Children, Fragment, PropsWithChildren, ReactNode } from 'react';
+import { Children, Fragment, isValidElement, PropsWithChildren, ReactNode } from 'react';
 
 interface Props extends PropsWithChildren {
   with: ReactNode;
@@ -15,10 +15,10 @@ export function Separated({ children, with: separator, first = false, last = fal
   return (
     <>
       {first && separator}
-      {childrenArray.map((child, i) => (
-        <Fragment key={i}>
+      {childrenArray.map((child, index) => (
+        <Fragment key={isValidElement(child) ? child.key : index}>
           {child}
-          {i + 1 !== childrenLength ? separator : null}
+          {index + 1 !== childrenLength && separator}
         </Fragment>
       ))}
       {last && separator}