Splitting form between components

export function ContentItemDetails({ id }: { id: string }) {
  const form = useAppForm({
    defaultValues: {
      translations: {},
      locale: i18n.defaultLocale,
    } as FormData,
  });

  return (
    <Card
      className="flex-1"
      captionSize={"sm"}
      caption={
        <span className="flex items-center gap-5">
          <span>Details</span>

          <form.AppField name="locale">
            {(field) => <field.LocaleSwitchField />}
          </form.AppField>
        </span>
      }
    >
      <Suspense fallback={<div>Loading...</div>}>
        <ContentItemDetailsContent id={id} />
      </Suspense>
    </Card>
  );
}

function ContentItemDetailsContent({ id }: { id: string }) {
  const contentItemQO = getContentQueryOptions(id);

  const { data } = useSuspenseQuery(contentItemQO);

  const form = useFormContext(); // ? 
  return <form>
    
  </form>;
}

export function ContentItemDetails({ id }: { id: string }) {
  const form = useAppForm({
    defaultValues: {
      translations: {},
      locale: i18n.defaultLocale,
    } as FormData,
  });

  return (
    <Card
      className="flex-1"
      captionSize={"sm"}
      caption={
        <span className="flex items-center gap-5">
          <span>Details</span>

          <form.AppField name="locale">
            {(field) => <field.LocaleSwitchField />}
          </form.AppField>
        </span>
      }
    >
      <Suspense fallback={<div>Loading...</div>}>
        <ContentItemDetailsContent id={id} />
      </Suspense>
    </Card>
  );
}

function ContentItemDetailsContent({ id }: { id: string }) {
  const contentItemQO = getContentQueryOptions(id);

  const { data } = useSuspenseQuery(contentItemQO);

  const form = useFormContext(); // ? 
  return <form>
    
  </form>;
}