Form does not post when clicking Form.Button element

[CarlosGTrejo]

I have a page where I am using the Tabs component to switch between two types of forms.
I reused most of the code from the Forms component docs and the forms example.
The main difference is that I am trying to put two forms in my form component.

The issue is that when I press the Form.Button the form does not submit (I added a console.log in the corresponding action in +page.server.ts and there is no output), I checked the client network tab and no POST request is sent.

I noticed that if I remove use:familyEnhance the form goes through to the server and my console log runs in the corresponding action.
Is there something wrong with my code? If I am approaching this the wrong way, what would be a better solution?

invite-form.svelte

<script lang="ts">
    import * as Form from "$lib/components/ui/form/index.js";
    import * as Tabs from "$lib/components/ui/tabs";
    import { tick } from "svelte";
    import { cn } from "$lib/utils.js";
    import { Input } from "$lib/components/ui/input/index.js";
    import { Button } from "$lib/components/ui/button/index.js";
    import { individualSchema, type IndividualSchema } from "./schema";
    import { familySchema, type FamilySchema } from "./schema";
    import {
        type SuperValidated,
        type Infer,
        superForm,
    } from "sveltekit-superforms";
    import { zodClient } from "sveltekit-superforms/adapters";

    export let familyData: SuperValidated<Infer<FamilySchema>>;
    export let individualData: SuperValidated<Infer<IndividualSchema>>;

    const familyForm = superForm(familyData, {
        validators: zodClient(familySchema),
    });

    const individualForm = superForm(individualData, {
        validators: zodClient(individualSchema),
    });

    const { form: familyFormData, enhance: familyEnhance } = familyForm;
    const { form: individualFormData, enhance: individualEnhance } =
        individualForm;

    function addMember() {
        $familyFormData.familyMembers = [...$familyFormData.familyMembers, ""];

        tick().then(() => {
            const memberInputs = Array.from(
                document.querySelectorAll<HTMLElement>(
                    "#family-form input[name='familyMembers']",
                ),
            );
            const lastInput = memberInputs[memberInputs.length - 1];
            lastInput && lastInput.focus();
        });
    }
</script>

<Tabs.Root value="family">
    <Tabs.List>
        <Tabs.Trigger value="family">Family</Tabs.Trigger>
        <Tabs.Trigger value="individual">Individual</Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content value="family">
        <form method="POST" action="?/family" class='space-y-4' use:familyEnhance id="family-form">
            <Form.Field form={familyForm} name="phone">
                <Form.Control>
                    {#snippet children({ props })}
                        <Form.Label>Phone</Form.Label>
                        <Input
                            {...props}
                            type="tel"
                            placeholder="9790001234"
                            bind:value={$familyFormData.phone}
                        />
                    {/snippet}
                </Form.Control>
                <Form.Description
                    >Phone number required for invitation access.</Form.Description
                >
                <Form.FieldErrors />
            </Form.Field>
            <Form.Field form={familyForm} name="familyName">
                <Form.Control>
                    {#snippet children({ props })}
                        <Form.Label>Family</Form.Label>
                        <Input
                            {...props}
                            placeholder="Smith"
                            bind:value={$familyFormData.familyName}
                        />
                    {/snippet}
                </Form.Control>
                <Form.FieldErrors />
            </Form.Field>
            <div> <!--Family Members-->
                <Form.Fieldset form={familyForm} name="familyMembers">
                    <Form.Legend>Members</Form.Legend>
                    {#each $familyFormData.familyMembers as _, i}
                        <Form.ElementField
                            form={familyForm}
                            name="familyMembers[{i}]"
                        >
                            <Form.Description class={cn(i !== 0 && "sr-only")}>
                                Add members in this family
                            </Form.Description>
                            <Form.Control>
                                {#snippet children({ props })}
                                    <Input
                                        {...props}
                                        bind:value={$familyFormData
                                            .familyMembers[i]}
                                    />
                                {/snippet}
                            </Form.Control>
                            <Form.FieldErrors />
                        </Form.ElementField>
                    {/each}
                </Form.Fieldset>
                <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    class="mt-2"
                    onclick={addMember}
                >
                    Add Member
                </Button>
            </div>
            <Form.Button>Create</Form.Button>
        </form>
    </Tabs.Content>
    <Tabs.Content value="individual">Individual invite</Tabs.Content>
</Tabs.Root>

+page.svelte

<script lang="ts">
    import type { PageData } from "./$types.js";
    import InviteForm from "./invite-form.svelte";
    export let data: PageData;
</script>

<InviteForm 
    familyData={data.familyForm} 
    individualData={data.individualForm} 
/>

+page.server.ts

import type { PageServerLoad } from './$types';
import type { Actions } from './$types';
import { fail } from '@sveltejs/kit';
import { superValidate } from "sveltekit-superforms";
import { familySchema, individualSchema } from "./schema";
import { zod } from "sveltekit-superforms/adapters";

export const load = (async () => {
    const familyForm = await superValidate(zod(familySchema));
    const individualForm = await superValidate(zod(individualSchema));

    return {
        familyForm,
        individualForm,
    };
}) satisfies PageServerLoad;

export const actions: Actions = {
    family: async (event) => {
        console.log('family')
        const form = await superValidate(event, zod(familySchema));
        if (!form.valid) {
            return fail(400, {
                familyForm: form,
            });
        }
        // Handle valid family form submission
        console.log('Family form data:', form.data);
        return {
            familyForm: form,
        };
    },
    individual: async (event) => {
        const form = await superValidate(event, zod(individualSchema));
        if (!form.valid) {
            return fail(400, {
                individualForm: form,
            });
        }
        // Handle valid individual form submission
        console.log('Individual form data:', form.data);
        return {
            individualForm: form,
        };
    },
};

[CarlosGTrejo]

It's my fault, my form schema is expecting some values that I forgot to pass through a hidden field.