This is my ServiceSchema:

export const ServiceSchema = z.object({
    translation: z.object({ name: z.string(), language: z.string() }).array()

})

I want to create services with fieldarray and every time that i click "Add service" give me two fields to fill out. One for translation name and one for language.

This is my source code(form):

 <Form {...form}>
        <form
          onSubmit={form.handleSubmit(onSubmit)}
          className="space-y-8 w-full"
        >
          <div className="grid grid-cols-3 w-full gap-8">
            <div className="flex flex-col space-y-4">
              {fields.map((field, index) => (
                <FormField
                  key={field.id}
                  control={form.control}
                  name={`translation.${index}.name`}
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Name</FormLabel>
                      <FormControl>
                        <Input
                          disabled={isPending}
                          placeholder="Service name"
                          {...field}
                        />
                      </FormControl>
                      <FormMessage className="pt-2" />
                    </FormItem>
                  )}
                />
              ))}
              <Button type="button" variant={"outline"} size={"sm"} className="mt-2" onClick={() => append({ language: "", name: "" })}>Add Service</Button>
            </div>

          </div>
          <Button disabled={isPending} className="ml-auto" type="submit">
            {action}
          </Button>
        </form>
      </Form>

interface ServiceFormProps {
  initialData: ServiceTranslations | null;
}
export const ServiceForm = ({
  initialData,
}: ServiceFormProps) => {

  const router = useRouter();
  const params = useParams();

  const [error, setError] = useState<string | undefined>("");
  const [isPending, startTransition] = useTransition();

  const title = initialData ? "Edit service" : "Create service";
  const description = initialData ? "Edit a service" : "Add a new service";
  const action = initialData ? "Save changes" : "Create";

  const form = useForm<z.infer<typeof ServiceSchema>>({
    resolver: zodResolver(ServiceSchema),
    defaultValues:
      initialData ? {
        ...initialData
      } : {
        translation: "",
      },
    mode: "onChange"

  });


  const { fields, append } = useFieldArray({
    name: "translation",
    control: form.control,
  })