defineField for deeply nested arrays of objects

[CallumVass]

Hi,

I have the following schema which is deeply nested:

const { handleSubmit, isSubmitting, defineField } = useForm({
  validationSchema: toTypedSchema(newReportSchema),
  initialValues: {
    form: data.value?.id,
    sections: data.value?.expand?.['sections(form)'].map(section => ({
      section: section.id,
      name: section.name,
      description: section.description,
      order: section.order,
      answers: section.expand?.['fields(section)'].map(field => ({
        field: field.id,
        required: field.required,
        order: field.order,
        type: field.type,
        value: '',
      })).sort((n1, n2) => n1.order - n2.order) ?? [],
    })).sort((n1, n2) => n1.order - n2.order) ?? [],
  },
})

I am using defineField for sections which is fine:

const [sections, sectionsAttrs] = defineField('sections')

But when iterating over each section - how do I use defineField for its answers?

<AppCard v-for="(section, idx) in sections" :key="section.section" class="app-spacing">
  <div class="space-y-0.5">
    <SubHeading>{{ section.name }}</SubHeading>
    <p v-if="section.description">
      {{ section.description }}
    </p>

    <div v-for="(answer) in section.answers" :key="answer.field">
      <div class="flex items-center justify-between gap-4">
        <div class="flex-1" /> <!-- how do I use defineField?
      </div>
    </div>
  </div>
</AppCard>

Do I need to create another component and pass through defineField under each section? Thanks