react-hook-form with react-redux-firebase not working

Question

Not sure if this is a bug or not, but I'm trying it here. I'm trying to use react-hook-form with react-redux-firebase , but I cannot get it working. I made a simple example which uses react-redux-firebase to initialize Firebase and then created a form component like so:

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

export default function Form() {
  const [register, submit] = useForm();

  return (
    <>
      <h1>Type in your text</h1>
      <form>
        <input ref={register} type="text" required></input>
      </form>
    </>
  );
}

As soon as I include the line with useForm , the page immediately crashes with "TypeError: Invalid attempt to destructure non-iterable instance".

How can I solve this? The complete example can be found here :

Answer 1

You should probably look into the docs of react-hook-form again. Looks like you'll be destructuring an object {} , not array [] .

Try changing this line:

const [register, submit] = useForm();

to:

const {register, submit} = useForm();