fix: spread ref for proper focus on error

Author: ntatoud

app/components/form/field-radio-group/docs.stories.tsx

@@ -233,13 +233,9 @@ export const WithCustomRadio = () => {
             type="radio-group"
             name="bear"
             options={options}
-            renderOption={({ value, label, id, key }) => {
+            renderOption={({ label, ...props }) => {
               // We can then customize the render of our field's radios
-              return (
-                <CardRadio value={value} id={id} key={key}>
-                  {label}
-                </CardRadio>
-              );
+              return <CardRadio {...props}>{label}</CardRadio>;
             }}
           />
         </FormField>

app/components/form/field-radio-group/index.tsx

@@ -54,7 +54,10 @@ export const FieldRadioGroup = <
       disabled={disabled}
       defaultValue={defaultValue}
       shouldUnregister={shouldUnregister}
-      render={({ field: { onBlur, onChange, ...field }, fieldState }) => {
+      render={({
+        field: { onBlur, onChange, value, ...field },
+        fieldState,
+      }) => {
         return (
           <div
             {...containerProps}
@@ -75,9 +78,9 @@ export const FieldRadioGroup = <
                   ? `${ctx.descriptionId}`
                   : `${ctx.descriptionId} ${ctx.errorId}`
               }
-              {...rest}
+              value={value}
               onValueChange={onChange}
-              {...field}
+              {...rest}
             >
               {options.map(({ label, ...option }) => {
                 const radioId = `${ctx.id}-${option.value}`;
@@ -88,14 +91,15 @@ export const FieldRadioGroup = <
                       {renderOption({
                         label,
                         onBlur,
+                        ...field,
                         ...option,
                       })}
                     </React.Fragment>
                   );
                 }
 
                 return (
-                  <Radio key={radioId} onBlur={onBlur} {...option}>
+                  <Radio key={radioId} onBlur={onBlur} {...field} {...option}>
                     {label}
                   </Radio>
                 );