reactjs - Pasando métodos a través de componentes hijos usando React-Hook-Forms

Estoy intentando usar el método register() en mi componente hijo. Pero estoy recibiendo un error de Typescript que dice: Se esperaban 1-2 argumentos, pero se recibieron 0.

¿Estoy suponiendo que estoy pasando el método de registro incorrectamente?

Componente Padre

type FormValues = {
  projectType: string;
};

const Parent = () => {
  const {
    register,
  } = useForm<FormValues>({ mode: 'all' });
  return (
    <Container>
      <FormBlock id="form">
        <fieldset>
          <ChildComponent props={register()}/>
        </fieldset>
      </FormBlock>
    </Container>
  );
};

Componente Hijo

const ChildComponent = ({ props }) => {
  return (
    <InputField {...props.register('projectType')}></InputField
  );
};

Respuesta #1

Debes actualizar la siguiente línea a:

<ChildComponent props={register} />

No deberías llamar a register, tienes que quitar los paréntesis

EDITAR: gracias a Calvin

Tienes que editar el componente:

<InputField {...props('projectType')}></InputField>

Es más limpio renombrar props a register

<ChildComponent register={register} />

// Field
<InputField {...register('projectType')}></InputField>

Respuesta #2

También puedes pasar propiedades de formulario a componentes anidados con useForm, useFormContext y FormProvider.

Necesitas obtener los métodos del formulario con useForm() en el componente padre, envolver su contenido con <FormProvider> y obtener los métodos del formulario de los componentes hijos usando useFormContext().

Código de la documentación oficial:

import React from "react";
import { useForm, FormProvider, useFormContext } from "react-hook-form";

export default function App() {
  const methods = useForm();
  const onSubmit = data => console.log(data);

  return (
    <FormProvider {...methods} > // pass all methods into the context
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <NestedInput />
        <input type="submit" />
      </form>
    </FormProvider>
  );
}

function NestedInput() {
  const { register } = useFormContext(); // retrieve all hook methods
  return <input {...register("test")} />;
}

Enlace: https://www.react-hook-form.com/api/useformcontext/