Form composition create reusable component using withForm

const formSchema = z.object({
    newField: z.string().min(1),
    // Nest the address fields under an 'address' key
    ...AddressSchema.shape,
});
type AllFormFields = z.infer<typeof formSchema>;

export default function Home() {
    const form = useAppForm({
        defaultValues: {} as AllFormFields,
        validators: {
            onBlur: formSchema,
        },
        onSubmit: async ({ value }) => {
            console.log(value);
        },
    });
    return (
        <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
            <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
                <form
                    onSubmit={(e) => {
                        e.preventDefault();
                        e.stopPropagation();
                        form.handleSubmit();
                    }}
                >
                    <form.AppField
                        name="newField"
                        children={(field) => (
                            <field.TextField label="some textfield" />
                        )}
                    />
                    <AddressForm form={form}></AddressForm>
                    <form.AppForm>
                        <form.SubmitButton>Senden</form.SubmitButton>
                    </form.AppForm>
                </form>
            </main>
        </div>
    );
}

export const AddressForm = withForm({
    defaultValues: {} as Address,
    render: function Render({ form }) {/*formfields*/}