to setValues an array type but it don't working

[gaoyusongcn]

Error:

onMounted(async () => {
    const res = await myAPI();

    setValues({
      // isn't working
      contacts: res.contacts,

      // working
      // contacts: [{ name: res.contacts[0].name, phone: res.contacts[0].phone }],
    });
});

code snippet

<template>
  <div
    v-for="(contact, idx) in formFieldContacts"
    :key="contact.key"
    class="row no-wrap"
  >
    <div class="col-4">
      <Field :name="`contacts[${idx}].name`" v-slot="{ field, value }">
        {{ field }} || {{ value }}
        <q-input
          :model-value="(field.value as string)"
          v-bind="field"
          :error-message="(formErrors as any)[`contacts[${idx}].name`]"
          :error="!!(formErrors as any)[`contacts[${idx}].name`]"
          type="text"
          label="Contact Name"
          outlined
        />
      </Field>
    </div>
  </div>
</template>

<script setup lang="ts">
.
.
.
type Contact = { name: string; phone: string };

const formSchema = object().shape({
  contacts: array().of(
    object().shape({
      name: string().required().label('Contact Name'),
      phone: string().required().label('Contact Phone'),
    })
  ),
});

const schemaInitialContacts: Contact = { name: '', phone: '' };
const { setValues } = useForm<{ contacts: Tag.Contact[] }>({
  validationSchema: formSchema,
  initialValues: {
    contacts: [{ name: 'initname', phone: 'initphone' }],
  },
});

const {
  fields: formFieldContacts,
} = reactive(useFieldArray<Contact>('contacts'));
.
.
.
</script>