How to use arrays of complex objects in compound forms

[SalzstangeSalamiBrief]

Hello,

I want to build a form an entity like this:

interface IMyEntity {
  id: number;
  date: Date;
  subEntity: {
    id: number;
    name: string;
    description: string;
  }[];
}

Because each field is encapsulated in a dedicated FC and is used while composing the form.
This could look like this:

// form.tsx

import { FormField } from "$components/chakra-base/formField";
import { parseDateToHtmlInputValueString, tryParseDate } from "$lib/dateParser";
import { Fieldset, Input, Stack } from "@chakra-ui/react";
import {
  createFormHook,
  createFormHookContexts,
  FormValidateOrFn,
  useStore,
} from "@tanstack/react-form";

export function DateFormField() {
  const field = useFieldContext<Date | undefined>();
  const errors = useStore(field.store, (state) => state.meta.errors);

  return (
    <FormField
      label="Date"
      helperText="The date of the event"
      errorText={errors?.[0]?.error}
      required
    >
      <Input
        type="date"
        value={parseDateToHtmlInputValueString(field.state.value)}
        onChange={(e) => {
          field.handleChange(tryParseDate(e.target.value));
        }}
      />
    </FormField>
  );
}
export const { fieldContext, formContext, useFieldContext, useFormContext } =
  createFormHookContexts();

const { useAppForm } = createFormHook({
  fieldContext,
  formContext,
  fieldComponents: {
    DateFormField,
  },
  formComponents: {},
});

interface IMyEntity {
  id: number;
  date: Date;
  subEntity: {
    id: number;
    name: string;
    description: string;
  }[];
}

export function MyForm() {
  const diaryForm = useAppForm<
    IMyEntity,
    undefined,
    undefined,
    undefined,
    undefined,
    undefined,
    FormValidateOrFn<IMyEntity>,
    undefined,
    undefined,
    undefined
  >({
    defaultValues: {
      // omitted,
    },
  });

  return (
    <form>
      <Fieldset.Root>
        <Fieldset.Content gap="spacing.xl">
          <Stack gap="spacing.lg">
            <diaryForm.AppField
              name="date"
              children={() => <DateFormField />}
            />
          </Stack>
        </Fieldset.Content>
      </Fieldset.Root>
    </form>
  );
}

Now I want to add a component for the subEntity like this: that looks like this and renders the array with proper change handling?

// SubEntityFormField.tsx

export function SubEntityFormField() {
  const field = useFieldContext<
    {
      id: number;
      name: string;
      description: string;
    }[]
  >();
  const errors = useStore(field.store, (state) => state.meta.errors);

  return (
    <FormField
      label="Date"
      helperText="The date of the event"
      errorText={errors?.[0]?.error}
      required
    >
      {/* TODO Render array */}
    </FormField>
  );
}

How can I build the component for the subEntity that renders the array and handles the change event of each field in the entity properly?