How to use array mode with form composition

export const { useAppForm } = createFormHook({
    fieldContext,
    formContext,

    fieldComponents: {
        EnumValuesField
    },
    formComponents: {},
})

<form.Subscribe selector={(state) => state.values.dataType}>
    {(dataType) => (
        <>
            {dataTypesWithEnum.includes(dataType) && (
                <form.AppField name="enumValues" mode="array">
                    {(field) => <field.EnumValuesField label={'Enum Values'} dataType={dataType} /> }
                </form.AppField>
            )}
        </>
    )}
</form.Subscribe>

export function EnumValuesField({ label }: Props) {
    const field = useFieldContext<Array<EnumValue>>()
    const form = useFormContext()

    return <Field>
        <FieldLabel>{label}</FieldLabel>
        <div className="flex flex-col gap-2">
            {field.state.value.map((item, i) => (
                <div key={item.displayName} className="flex items-start gap-2">
                    <form.Field
                        name={`enumValues[${i}].displayName`}
                        children={(sub) => (
                            <Input />
                        )}
                    />
                </div>
            ))}
        </div>
    </Field>
}