TypeScript: pass result of useForm as component props

import { ReactNode } from "react";
import { useForm } from "@tanstack/react-form";

function Parent() {
  const form = useForm({
    defaultValues: {
      emailAddress: "",
    },
    onSubmit: async ({ value }) => {
      alert(value.emailAddress);
    },
  });

  return (
    // following line shows type error
    <Child form={form}>
      {(form) => (
        <form.Field
          name="emailAddress"
          children={(field) => (
            // render the form field
            <></>
          )}
        />
      )}
    </Child>
  );
}

function Child<TForm extends ReturnType<typeof useForm>>(props: {
  readonly form: TForm;
  readonly children: (form: TForm) => ReactNode;
}) {
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        e.stopPropagation();
        props.form.handleSubmit();
      }}
    >
      {/* here goes some additional markup */}
      {props.children(props.form)}
      <props.form.Subscribe
        selector={(state) => [state.canSubmit, state.isSubmitting]}
        children={([canSubmit]) => (
          <Button variant="contained" type="submit" disabled={!canSubmit}>
            Submit
          </Button>
        )}
      />
    </form>
  );
}

import { ReactNode } from "react";
import { useForm } from "@tanstack/react-form";

function Parent() {
  const form = useForm({
    defaultValues: {
      emailAddress: "",
    },
    onSubmit: async ({ value }) => {
      alert(value.emailAddress);
    },
  });

  return (
    // following line shows type error
    <Child form={form}>
      {(form) => (
        <form.Field
          name="emailAddress"
          children={(field) => (
            // render the form field
            <></>
          )}
        />
      )}
    </Child>
  );
}

function Child<TForm extends ReturnType<typeof useForm>>(props: {
  readonly form: TForm;
  readonly children: (form: TForm) => ReactNode;
}) {
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        e.stopPropagation();
        props.form.handleSubmit();
      }}
    >
      {/* here goes some additional markup */}
      {props.children(props.form)}
      <props.form.Subscribe
        selector={(state) => [state.canSubmit, state.isSubmitting]}
        children={([canSubmit]) => (
          <Button variant="contained" type="submit" disabled={!canSubmit}>
            Submit
          </Button>
        )}
      />
    </form>
  );
}