Reference with React Hook Form doesn't work on nested input

Question

I'm trying to reference each input to validate with React Hook Form but I always get the same error: "ReferenceError: useFormContext is not defined" I followed the steps in the documentation but I can't get it to work.

This is my code from the form where I call the nested input:

import { useForm, FormProvider, useFormContext } from "react-hook-form";
import Input from "../fragments/Input"

const NewUser = () => {
  
  const methods = useForm();
  const onSubmit = data => console.log(data);

  return (
    <>
        <div className="flex flex-wrap m-5 mx-auto w-full p-2">
          <div className="w-full md:w-4/5 px-4">

            <FormProvider  {...methods} >
              <form 
                onSubmit={methods.handleSubmit(onSubmit)}
                className='flex-auto px-4 rounded-b-md md:px-10 py-5 pt-0 border-2 bg-slate-100  shadow-lg'
              >
          
                  <div className="flex flex-wrap">

                      < Input 
                          label='Nombre de Usuario'
                          htmlFor='username'
                          name='username'
                          id="username"
                          type="text"
                          placeholder="Nombre de Usuario"
                          width= 'md:w-1/2 lg:w-6/12'
                      />

                      <input 
                          type="submit" 
                          value="Guardar"
                          className="
                            w-full
                            bg-gradient-to-r from-cyan-500 to-blue-500
                            hover:shadow-lg shadow-orange-100
                            hover:cursor-pointer
                            transition duration-600
                            py-3 text-white uppercase 
                            font-bold rounded mt-5 mb-2"
                        />
                  </div>
              </form>
            </FormProvider>
          </div>
          <div className="w-full md:w-1/5 bg-slate-500">
            Test
          </div>
        </div>


    </>
  )
}

export default NewUser

And this is the code for my nested input:

const Input = ( { label,
                  name,
                  htmlFor,
                  id,
                  type,
                  placeholder,
                  width
              } ) => {
const { register } = useFormContext();
  return (

    <div className={`w-full ${ width } px-4`}>
      <div className='relative w-full mb-3'>
        <div className="my-1">
          <label className="block uppercase text-blueGray-600 text-xs font-bold mb-2"
            htmlFor={ htmlFor }>
            { label }
          </label>
          <input 
            {...register("username")}
            id= {id}
            name= {name}
            type= {type } 
            placeholder= {placeholder}
            className= "border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-15"
          />
        </div>
      </div>
    </div>
  )
}

export default Input