How do you manage dynamic field arrays in TanStack Form?

<script setup lang="ts">
import { useForm } from "@tanstack/vue-form"
const form=useForm({
  defaultValues: { friends:[{ name:"", age:0 }] },
  onSubmit: ({ value })=>console.log(value),
})
</script>
<template>
  <form @submit.prevent="form.handleSubmit()">
    <form.Field name="friends" mode="array">
      <template #default="ff">
        <div v-for="(_,i) in ff.state.value" :key="i">
          <form.Field :name="`friends[${i}].name`">
            <template #default="{ field }">
              <input :placeholder="`Friend ${i+1} name`"
                     :value="field.state.value"
                     @input="field.handleChange(($event.target as HTMLInputElement).value)" />
            </template>
          </form.Field>
          <button type="button" @click="ff.removeValue(i)">Remove</button>
        <;
        <button type="button" @click="ff.pushValue({ name:'', age:0 })">Add friend</button>
      </template>
    </form.Field>
    <button type="submit">Save</button>
  </form>
</template>