issue: useFieldArrary doesn't set default values for radio buttons

[Notaduck]

Version Number

7.34.0

Codesandbox/Expo snack

https://codesandbox.io/s/react-hook-form-usefieldarray-forked-vq7ctg

Steps to reproduce

1. Watch the first element which should be true
2. Click on append
3. See the newly appended item
4. This one should be false

Expected behaviour

The expected behaviour would be that the first element dateIsKnown should be set to yes/true and when append is called then the dateIsKnown should be false

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[bluebill1049]

There is not a such uage by assing key at individual input:

<input
  {...register(`trackDays.${index}.dateIsKnown`)}
  type="radio"
  value={true}
  key={field.id}
/>

for radio or checkbox it's also possible to build a controlled component and wrap it with controller/useController, here is an uncontrolled example: https://codesandbox.io/s/react-hook-form-usefieldarray-forked-xr8ft8?file=/src/index.js

[Jamalahmad123]

any idea how can we use radio input with useFieldArray. Just scrolling through docs and didn't find any example yet

[Jamalahmad123]

just struggling to make it work here is what i want to achieve.

  const { control } = useFormContext();

  const usersQuery = useGetUsers();

  const { fields, append, remove } = useFieldArray({
    control,
    name: "recruiters",
  });

  const usersList = usersQuery.isSuccess
    ? usersQuery.data
        .filter((user) => user.role.role === "Recruiter")
        .map((user) => ({
          id: user.id,
          value: user.name,
        }))
    : [];

  return (
    <section className="space-y-4">
      <div className="flex items-center justify-between gap-3">
        <h2 className="h2-semibold">Recruiters</h2>
        <Button
          type="button"
          variant="outline"
          onClick={() =>
            append({
              user_id: undefined,
              head: false,
            })
          }
        >
          Add Recruiter
        </Button>
      </div>
      <div className="responsive-grid gap-3">
        {fields.map((field, index) => (
          <div className="secondary-card space-y-3" key={field.id}>
            <div className="flex items-center gap-3">
              <h3 className="font-medium flex-1">Person {index + 1}</h3>
              <Button
                type="button"
                size="icon"
                variant="outline"
                className="text-destructive"
                onClick={() => fields.length > 1 && remove(index)}
                disabled={fields.length === 1}
              >
                <Trash />
                <span className="sr-only">Delete Recruiter</span>
              </Button>
            </div>
            <FormField
              control={control}
              name={`recruiters.${index}.user_id`}
              render={({ field: { value, onChange, ...rest } }) => (
                <FormItem>
                  <FormLabel>Select user</FormLabel>
                  <Combobox
                    className="bg-card"
                    options={usersList}
                    selectedValue={value}
                    onSelectChange={onChange}
                    placeholder="Select user"
                    isLoading={usersQuery.isPending}
                    isError={usersQuery.isError}
                    {...rest}
                  />
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={control}
              name={`recruiters.${index}.head`}
              render={({ field: inputField }) => (
                <FormItem>
                  <div className="flex items-center gap-3">
                    <FormControl>
                      <Input
                        className="size-4 bg-transparent p-0 shadow-none border-none block"
                        type="radio"
                        {...inputField}
                        value="false"
                        key={field.id}
                      />
                    </FormControl>
                    <FormLabel className="flex-1 w-full">
                      Mark as head
                    </FormLabel>
                  </div>
                  <FormMessage />
                </FormItem>
              )}
            />
          </div>
        ))}
      </div>
    </section>
  );
};` 
I'm using shacn ui form component. and react hook form useFieldArray just want to mark one of the recruiter as head.