How do you pass the form via the context api?

import { useForm } from '@tanstack/react-form'
import { createContext, useContext, type ReactNode } from 'react'
import z from 'zod'

export function createForm<Z extends z.ZodType>(
  formSchema: Z,
  defaultValues: z.input<Z>,
  submitHandler: (value: z.input<Z>) => void,
) {
  return useForm({
    defaultValues: defaultValues,
    validators: {
      onSubmit: formSchema,
    },
    onSubmit: ({ value }) => {
      submitHandler(value)
    },
  })
}

type FormInstance = ReturnType<typeof createForm>

const FormContext = createContext<FormInstance | null>(null)

const addExpenseFormSchema = z.object({
  description: z
    .string()
    .min(1, 'You must provide a description')
    .max(30, "Description can't exceed 30 characters"),
  amount: z.number().min(1, 'You must provide the amount'),
  category: z.string().refine((val) => val !== '', {
    message: 'You must specify a category',
  }),
})

export const FormProvider = ({ children }: { children: ReactNode }) => {
  const form = createForm(
    addExpenseFormSchema,
    {amount: 0, category: "", description: ""},
    console.log,
  )
  return <FormContext.Provider value={form}>{children}</FormContext.Provider>
}

export const useExpenseFormContext = () => {
  const context = useContext(FormContext)
  if (!context) {
    throw new Error('useMyFormContext must be used within FormProvider')
  }
  return context
}

import { useForm } from '@tanstack/react-form'
import { createContext, useContext, type ReactNode } from 'react'
import z from 'zod'

export function createForm<Z extends z.ZodType>(
  formSchema: Z,
  defaultValues: z.input<Z>,
  submitHandler: (value: z.input<Z>) => void,
) {
  return useForm({
    defaultValues: defaultValues,
    validators: {
      onSubmit: formSchema,
    },
    onSubmit: ({ value }) => {
      submitHandler(value)
    },
  })
}

type FormInstance = ReturnType<typeof createForm>

const FormContext = createContext<FormInstance | null>(null)

const addExpenseFormSchema = z.object({
  description: z
    .string()
    .min(1, 'You must provide a description')
    .max(30, "Description can't exceed 30 characters"),
  amount: z.number().min(1, 'You must provide the amount'),
  category: z.string().refine((val) => val !== '', {
    message: 'You must specify a category',
  }),
})

export const FormProvider = ({ children }: { children: ReactNode }) => {
  const form = createForm(
    addExpenseFormSchema,
    {amount: 0, category: "", description: ""},
    console.log,
  )
  return <FormContext.Provider value={form}>{children}</FormContext.Provider>
}

export const useExpenseFormContext = () => {
  const context = useContext(FormContext)
  if (!context) {
    throw new Error('useMyFormContext must be used within FormProvider')
  }
  return context
}