AppField doesn't exist on form object returned from useFormContext()

import { createFormHookContexts } from '@tanstack/react-form';
 
export const { fieldContext, formContext, useFieldContext, useFormContext } = createFormHookContexts();import { createFormHookContexts } from '@tanstack/react-form';

import { createFormHook } from '@tanstack/react-form';
import { FormInput } from '../components/Form/FormInput';
import { fieldContext, formContext } from './form-context';
 
export const { useAppForm } = createFormHook({
  fieldContext,
  formContext,
  fieldComponents: {
    FormInput,
  },
  formComponents: {},
});

export default function CompanyView({ company }: { company: CompanyRead }) {
  const { t } = useTranslation();
 
  const form = useAppForm({
    defaultValues: company,
    onSubmit: (values) => {
      console.log(values);
    },
  });
 
  return (
    <form.AppForm>
      {...}
        <Grid size={12}>
          <CommonSection company={company} />
        </Grid>
      {...}
    <form.AppForm>
  )
};