React Hooks Form : undefined values on submit

I took the example from the documentation :

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

export default function App() {
  const { register, handleSubmit, watch, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);

  console.log(watch("example")); 

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input defaultValue="test" {...register("example")} />
      <input type="submit" />
    </form>
  );
}

But on every change or on submit, I got undefined for each field

I tried to install the library again but nothing change and I got undefined everywhere…seems to be a problem with the register function. Does anybody got the same issue ?

Answer

With v7 the usage of register changed as noted in the comments. If you still need to use v6, you have to write it like this:

function App() {
  const { register, handleSubmit, watch, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);

  console.log(watch("example")); 

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input defaultValue="test" name="example" ref={register} />
      <input type="submit" />
    </form>
  );
}

Docs v6