From 929b2bb530d2f207bf7e6ccc3a1136e921aeb3e1 Mon Sep 17 00:00:00 2001
From: Pavel Garaev <ipagar@icloud.com>
Date: Thu, 11 Apr 2024 17:02:15 +0400
Subject: [PATCH] Refactor processChildren function in phone-input.tsx to
 handle child elements with a key parameter.

---
 src/phone-input/phone-input.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/phone-input/phone-input.tsx b/src/phone-input/phone-input.tsx
index f5c54ee..df238a1 100644
--- a/src/phone-input/phone-input.tsx
+++ b/src/phone-input/phone-input.tsx
@@ -111,22 +111,29 @@ export function PhoneInputRoot(
   }, [onPhoneChange, state.phoneNumber]);
 
   // Функция для обработки children
-  const processChildren = (child: ChildrenFunc | React.ReactNode) => {
+  const processChildren = (
+    child: ChildrenFunc | React.ReactNode,
+    key?: number
+  ) => {
     if (typeof child === 'function') {
-      return child({
+      const redactored = child({
         country: state.country,
         countryList: state.countryList,
+        key,
         onPhoneChange: (e) => state.handlePhoneNumberChange(e.target.value),
         open: isOpen,
         phone: state.phoneNumber,
       });
+
+      return React.cloneElement(redactored, { key });
     }
-    return child;
+
+    return React.cloneElement(child, { key });
   };
 
   // Обработка children, если это массив или одиночный элемент/функция
   const renderedChildren = Array.isArray(children)
-    ? children.map((child) => processChildren(child))
+    ? children.map((child, index) => processChildren(child, index))
     : processChildren(children);
 
   return (