add key to TransactionToast children

Author: brendan-defi

src/internal/components/Toast.tsx

@@ -11,7 +11,6 @@ type ToastProps = {
   isVisible: boolean;
   onClose: () => void;
   children: React.ReactNode;
-  parentComponentLifecycleStatus?: string;
 };
 
 const defaultAnimationByPosition = {
@@ -29,12 +28,11 @@ export function Toast({
   isVisible,
   onClose,
   children,
-  parentComponentLifecycleStatus,
 }: ToastProps) {
   const positionClass = getToastPosition(position);
   const animationClass = animation ?? defaultAnimationByPosition[position];
 
-  /* biome-ignore lint/correctness/useExhaustiveDependencies: retrigger durationMs on updates to children or lifecycleStatus  */
+  /* biome-ignore lint/correctness/useExhaustiveDependencies: retrigger durationMs on updates to children  */
   useEffect(() => {
     const timer = setTimeout(() => {
       if (isVisible) {
@@ -47,13 +45,7 @@ export function Toast({
         clearTimeout(timer);
       }
     };
-  }, [
-    durationMs,
-    isVisible,
-    onClose,
-    children,
-    parentComponentLifecycleStatus,
-  ]);
+  }, [durationMs, isVisible, onClose, children]);
 
   if (!isVisible) {
     return null;

src/transaction/components/TransactionToast.tsx

@@ -1,4 +1,10 @@
-import { useCallback, useEffect } from 'react';
+import {
+  Children,
+  cloneElement,
+  isValidElement,
+  useCallback,
+  useEffect,
+} from 'react';
 import { Toast } from '../../internal/components/Toast';
 import type { TransactionToastReact } from '../types';
 import { useTransactionContext } from './TransactionProvider';
@@ -48,9 +54,13 @@ export function TransactionToast({
       durationMs={durationMs}
       isVisible={isToastVisible}
       onClose={closeToast}
-      parentComponentLifecycleStatus={lifecycleStatus.statusName}
     >
-      {children}
+      {Children.map(children, (child) => {
+        if (isValidElement(child)) {
+          return cloneElement(child, { key: lifecycleStatus.statusName });
+        }
+        return child;
+      })}
     </Toast>
   );
 }