How do I type my form if I need to pass it to other components?

               form.setFieldValue(
                                `consignments[${index}].goodsItems`,
                                (oldValues) => {
                                  return oldValues.filter(
                                    (x, i) => i !== itemIndex
                                  );
                                }

               form.setFieldValue(
                                `consignments[${index}].goodsItems`,
                                (oldValues) => {
                                  return oldValues.filter(
                                    (x, i) => i !== itemIndex
                                  );
                                }

export const documentFormOptions = formOptions({
  defaultValues: {} as DocumentFormData,
  onSubmit: async () => {},
})

// inside my form component
function MyForm({defaultData}: {defaultData: DocumentFormData) {
    const form = useAppForm({
    ...documentFormOptions,
    defaultValues: defaultData, // here I have to override the object because the data is fetched.
    onSubmit: async ({ value }) => { // here I have to override the onSubmit bc I am using mutation
      await confirmDocumentMutation.mutateAsync({
        data: {
          id: document.id,
          title: value.title,
          type: value.type,
          invoice: value.invoice,
        },
      })
    },
  })

return (
   <form>
    {".... my form"}
   </form>)
}

export const documentFormOptions = formOptions({
  defaultValues: {} as DocumentFormData,
  onSubmit: async () => {},
})

// inside my form component
function MyForm({defaultData}: {defaultData: DocumentFormData) {
    const form = useAppForm({
    ...documentFormOptions,
    defaultValues: defaultData, // here I have to override the object because the data is fetched.
    onSubmit: async ({ value }) => { // here I have to override the onSubmit bc I am using mutation
      await confirmDocumentMutation.mutateAsync({
        data: {
          id: document.id,
          title: value.title,
          type: value.type,
          invoice: value.invoice,
        },
      })
    },
  })

return (
   <form>
    {".... my form"}
   </form>)
}

export const DocumentDetailsTab = withForm({
  ...documentFormOptions,
  props: {
    relatedDocuments: '' as unknown as DocumentFormData[], // this data is not available until the parent component renders but to get typesafety on it I have to give it a random value and cast it to what it needs to be
  },
  render: function DocumentDetailsTab({ relatedDocuments, form }) {
....}})

export const DocumentDetailsTab = withForm({
  ...documentFormOptions,
  props: {
    relatedDocuments: '' as unknown as DocumentFormData[], // this data is not available until the parent component renders but to get typesafety on it I have to give it a random value and cast it to what it needs to be
  },
  render: function DocumentDetailsTab({ relatedDocuments, form }) {
....}})

const formOps = formOptions({
// define a few stuff here, mainly the defaultValue type
})

// inside your component
const form = useAppForm({
  ...formOps,
// define validators and onSubmit here (maybe even other things)
})

const formOps = formOptions({
// define a few stuff here, mainly the defaultValue type
})

// inside your component
const form = useAppForm({
  ...formOps,
// define validators and onSubmit here (maybe even other things)
})

type formType = inferForm<typeof formOps>

type formType = inferForm<typeof formOps>