Ways to create sub-form to be used as form array

export const ItemForm = withForm({
    defaultValues: {} as z.infer<typeof itemSchema>,
    validators: {
        onChange: itemSchema,
    },
    render: function Render({ form }) {
        return (
            <div
                className={cn(
                    'col-span-6 items-center gap-2 rounded-xl border border-zinc-100 bg-white py-2.5',
                    'grid grid-cols-[2fr_5fr_2fr_2fr_2fr_0.5fr]'
                )}
            >
                <form.Field name="type">
                    {(field) => (
                        <div className="flex flex-col gap-1">
                            <Select
                                value={field.state.value}
                                onValueChange={(
                                    v: z.infer<typeof itemSchema>['type']
                                ) => field.handleChange(v)}
                            >
                                <SelectTrigger>
                                    <SelectValue placeholder="Type" />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="form">Question</SelectItem>
                                    <SelectItem value="notification">
                                        Notification
                                    </SelectItem>
                                </SelectContent>
                            </Select>

                            <FormMessage fieldMeta={field.state.meta} />
                        </div>
                    )}
                </form.Field>

                ...
            </div>
        );
    },
});

export const ItemForm = withForm({
    defaultValues: {} as z.infer<typeof itemSchema>,
    validators: {
        onChange: itemSchema,
    },
    render: function Render({ form }) {
        return (
            <div
                className={cn(
                    'col-span-6 items-center gap-2 rounded-xl border border-zinc-100 bg-white py-2.5',
                    'grid grid-cols-[2fr_5fr_2fr_2fr_2fr_0.5fr]'
                )}
            >
                <form.Field name="type">
                    {(field) => (
                        <div className="flex flex-col gap-1">
                            <Select
                                value={field.state.value}
                                onValueChange={(
                                    v: z.infer<typeof itemSchema>['type']
                                ) => field.handleChange(v)}
                            >
                                <SelectTrigger>
                                    <SelectValue placeholder="Type" />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="form">Question</SelectItem>
                                    <SelectItem value="notification">
                                        Notification
                                    </SelectItem>
                                </SelectContent>
                            </Select>

                            <FormMessage fieldMeta={field.state.meta} />
                        </div>
                    )}
                </form.Field>

                ...
            </div>
        );
    },
});