Fix children mapping keys in Carousel, CodeMockup, and Range

src/Carousel/Carousel.tsx

@@ -85,6 +85,7 @@ const Carousel = forwardRef<HTMLDivElement, CarouselProps>(
         >
           {children.map((child, i) => {
             return cloneElement(child, {
+              key: i,
               innerRef: itemRefs[i],
               index: i + 1,
               children: child.props.children,

src/CodeMockup/CodeMockup.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react'
 import { twMerge } from 'tailwind-merge'
 
 import { IComponentBaseProps } from '../types'
-import { CodeMockupLine } from './CodeMockupLine'
+import { CodeMockupLine, CodeMockupLineProps } from './CodeMockupLine'
 
 export type CodeMockupProps = React.HTMLAttributes<HTMLDivElement> &
   IComponentBaseProps
@@ -19,7 +19,12 @@ const CodeMockup = forwardRef<HTMLDivElement, CodeMockupProps>(
         className={classes}
         ref={ref}
       >
-        {children}
+        {React.Children.map(children, (child, index) => {
+          const childComponent = child as React.ReactElement<CodeMockupLineProps>
+          return React.cloneElement(childComponent, {
+              key: index,
+          })
+        })}
       </div>
     )
   }

src/Range/Range.tsx

@@ -48,8 +48,8 @@ const Range = forwardRef<HTMLInputElement, RangeProps>(
         />
         {isNumeric(step) && (
           <div className="w-full flex justify-between text-xs px-2">
-            {[...Array(numSteps + 1)].map(() => {
-              return <span>|</span>
+            {[...Array(numSteps + 1)].map((_, i) => {
+              return <span key={i}>|</span>
             })}
           </div>
         )}