react-hook-formについて調べてもわからなかったので

import React,{useState} from 'react'
import {useForm} from 'react-hook-form'
import FormInput from '../../molecules/FormInput/FormInput'
import firebase from '../../../config/firebase'


function Signup (){
  const {register,handleSubmit}=useForm()

const onSubmit=(data)=>{



  firebase.auth().createUserWithEmailAndPassword(data.email,data.password)
  .then(data=>{
console.log(data)
data.user.updateProfile(
  {
   displayName:data.userName
  }
).then(user=>{
console.log(user)
})
  })
.catch(err=>{
  console.log(err)
}
)
}



return (
    <>
    <h2>signup</h2>
    <form onSubmit={handleSubmit(onSubmit)}>
           <FormInput 
           label={"ユーザー名"}
           type={"text"} 
           inputRef={register}
           name={"userName"}
           />
           <FormInput 
           label={"パスワード"} 
           type={"password"} 
            inputRef={register}
            name={"password"}
            />
           <FormInput 
           label={"e-mail"}
           type={"email"}  
           inputRef={register}
           name={"email"}
           />
<button type="submit">送信</button>

    </form>
    </>
)
}

export default Signup