Updating keys to prevent react rendering errors.

src-ts/lib/form/Form.tsx

@@ -121,7 +121,7 @@ const Form: <ValueType extends any, RequestType extends any>(props: FormProps<Va
                 return (
                     <Button
                         {...button}
-                        key={button.label}
+                        key={button.label || `button-${index}`}
                         disable={isPrimaryGroup && isFormInvalid}
                         tabIndex={button.notTabble ? -1 : index + (inputs ? inputs.length : 0) + (formDef.tabIndexStart || 0)}
                     />

src-ts/lib/form/form-groups/FormGroups.tsx

@@ -100,8 +100,8 @@ const FormGroups: (props: FormGroupsProps) => JSX.Element = (props: FormGroupsPr
         )
     }
 
-    const formGroups: Array<JSX.Element | undefined> = formDef?.groups?.map((element: FormGroup) => {
-        return <FormGroupItem group={element} renderFormInput={renderInputField} />
+    const formGroups: Array<JSX.Element | undefined> = formDef?.groups?.map((element: FormGroup, index: number) => {
+        return <FormGroupItem key={`element-${index}`} group={element} renderFormInput={renderInputField} />
     }) || []
 
     return (

src-ts/lib/form/form-groups/form-card-set/FormCardSet.module.scss

@@ -9,13 +9,8 @@
         margin-bottom: $pad-lg;
     }
 
-    input[type=radio] {
-        position: absolute;
+    input[type=radio] {  
         opacity: 0;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
     }
 
     .card {

src-ts/lib/form/form-groups/form-card-set/FormCardSet.tsx

@@ -25,23 +25,22 @@ const FormCardSet: React.FC<FormCardSetProps> = ({ name, cards, onChange, value
     return (
         <div className={styles['form-card-set']}>
             {
-                cards?.map(card => {
+                cards?.map((card, index: number) => {
                     const formattedPrice: string | undefined = textFormatMoneyLocaleString(card.price)
                     const selected: boolean = value === card.id
 
                     return (
-
-                        <label className={cn(styles['card'], selected && styles['selected'])}>
+                        <label key={`card-${index}`}className={cn(styles['card'], selected && styles['selected'])}>
                             <input checked={value === card.id} type='radio' name={name} id={card.id} value={card.id} onChange={onChange} />
                             <div className={styles['card-header']}>
                                 <div className='body-medium-bold'>{card.title}</div>
                                 <h3>{formattedPrice}</h3>
                             </div>
                             <hr />
-                            {card.sections.map(section => (
-                                <div className={styles['card-section']}>
-                                    {section.rows.map(row => (
-                                            <div className={styles['card-row']}>
+                            {card.sections.map((section, sectionIndex: number) => (
+                                <div key={`section-${sectionIndex}`} className={styles['card-section']}>
+                                    {section.rows.map((row, rowIndex: number) => (
+                                            <div key={`row-${rowIndex}`} className={styles['card-row']}>
                                                 <span className={styles['card-row-col']}>
                                                     <>
                                                         {row.icon && iconFromName(row.icon)}

src-ts/lib/form/form-groups/form-radio/index.tsx

@@ -20,7 +20,7 @@ const FormRadio: React.FC<FormRadioProps> = ({type, name, options, onChange, val
         <div className={styles['form-radio']}>
             {
                 options?.map(({children: Option, id}: FormRadioButtonOption)  => (
-                    <label className={styles['option']} htmlFor={id}>
+                    <label key={id} className={styles['option']} htmlFor={id}>
                         <input checked={value === id} type={type} name={name} id={id} value={id} onChange={onChange} />
                         {renderOption(Option, value === id)}
                     </label>

src-ts/lib/route-provider/route.provider.tsx

@@ -127,7 +127,7 @@ export const RouteProvider: FC<RouteProviderProps> = (props: RouteProviderProps)
         return (
             <Route
                 element={routeElement}
-                key={route.title}
+                key={route.route}
                 path={path}
             />
         )