Next.js and react-hook-form - ref does not work

I am trying to use the react-hook-form with next js and typescript and I can't get it to work.

In my IDE I get the following error when I hover over ref:

Type 'UseFormRegister<FieldValues>' is not assignable to type 'LegacyRef<HTMLInputElement> | undefined'. Type 'UseFormRegister<FieldValues>' is not assignable to type '(instance: HTMLInputElement | null) => void'. Types of parameters 'name' and 'instance' are incompatible.

Next.js throws:

Unhandled Runtime Error
TypeError: path.split is not a function

TypeError: r.split is not a function

My component:

const Component = () => {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data: any) => console.log(data);

  return (
    <form noValidate onSubmit={handleSubmit(onSubmit)}>
      <input type="text" id="name" name="name" ref={register} />
    </form>
  );
};