React hook form and Chakra

Question

I just started to learn Charkra and i was trying to conect an custom Input based on chakra with the hook-form. But my input are always returning undefined

this is my custom Input `

export const Input = ({...rest}) =>{ return(

        <InputChakra
         {...rest}
         focusBorderColor='black'
         bg="gray.0"
         w={["300px", "300px", "420px", "420px"]}
         h="55px"
         fontSize="xl"
         />
)

}`

and this is my form

<Vstack
                    as="form"
                    onSubmit={handleSubmit(onSubmit)}
                >
                    <Input placeholder="Login" type="text"  {...register("name")}/>
                    <Input  placeholder="Senha" type="password" />
                    <ButtonPrimary type="submit">Logar</ButtonPrimary>
                </VStack>

Answer 1

Since React can't forward refs via props you have to use forwardRef for your Input component. Like this

export const Input = forwardRef(({...rest}, ref) =>{ 
  return(
    <InputChakra
     focusBorderColor='black'
     ref={ref}
     bg="gray.0"
     w={["300px", "300px", "420px", "420px"]}
     h="55px"
     fontSize="xl"
     {...rest}
   />
)})