Modular Forms with SolidStart

export type CreateApplication = {
    title: string;
    company: string;
};

export const addApplication = action(
    async ({ title, company }: CreateApplication) => {
        "use server";
        const userId = await getAuthUser();
        if (!userId) throw redirect("/");

        const [result] = await db
            .insert(application)
            .values({ title: title, company: company, userId })
            .returning();
        return result;
    },
    "add-application",
);

export function CreateForm() {
    const [_, { Form, Field }] = createForm<CreateApplication>();
    const create = useAction(addApplication);

    const handleSubmit: SubmitHandler<CreateApplication> = (values) => {
        console.log("submission");
        create(values);
    };
    const submission = useSubmission(addApplication);

    return (
        <>
          <Form onSubmit={handleSubmit} method="post">
        <Field name="company">
          {(field, props) => (
            <>
             <input {...props} type="text" placeholder="Company" />
             {field.error && <div>{field.error}</div>}
           </>
        )}
        </Field>
        <Field name="title">
        {(field, props) => (
        <>
          <input {...props} type="text" placeholder="title" />
          {field.error && <div>{field.error}</div>}
        </>
        )}
        </Field>
        <button type="submit">Create</button>
          </Form>
        <Show when={submission.error}>
          <p>{submission.error.message}</p>
        </Show>
        </>
    );
}