fix(sankey): include link's index in the React Component key when creating the SVG element (#2037)

* Include link's index in the react's key prop

This is to support custom color gradients for multiple links between the same two nodes. Also prevents the duplicate child key error when 2+ links attach to the same two nodes.

* Include Sankey link's index in the gradient id

Support custom color gradients for multiple links between the same two nodes.

Author: Ellis-808

packages/sankey/src/SankeyLinks.tsx

@@ -59,7 +59,7 @@ export const SankeyLinks = <N extends DefaultNode, L extends DefaultLink>({
         <>
             {links.map(link => (
                 <SankeyLinksItem<N, L>
-                    key={`${link.source.id}.${link.target.id}`}
+                    key={`${link.source.id}.${link.target.id}.${link.index}`}
                     link={link}
                     layout={layout}
                     path={getLinkPath(link, linkContract)}

packages/sankey/src/SankeyLinksItem.tsx

@@ -32,7 +32,7 @@ export const SankeyLinksItem = <N extends DefaultNode, L extends DefaultLink>({
     isInteractive,
     onClick,
 }: SankeyLinksItemProps<N, L>) => {
-    const linkId = `${link.source.id}.${link.target.id}`
+    const linkId = `${link.source.id}.${link.target.id}.${link.index}`
 
     const { animate, config: springConfig } = useMotionConfig()
     const animatedPath = useAnimatedPath(path)