React-hook-form doesn't recognize input value

Question

My react-hook-form doesn't recognize the input value once the user fills the input box.
It keeps returning the 'This field is required' error message with the password field.

Here's my code.

function SignIn({ setIsLoginView }: LoginProps) {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  const {
    register,
    handleSubmit,
    formState: { errors, isDirty, isValid, dirtyFields, touchedFields },
  } = useForm<IFormInput>({
    defaultValues: {
      userId: "",
      userPW: "",
    },
  });

  const onSubmit: SubmitHandler<IFormInput> = (data) => {
    RequestSignin({ username: data.userId, password: data.userPW })
      .then((res) => {
        console.log(res, data.userId);
        setIsLoginView(!setIsLoginView);
        setStoredToken(res.access_token);
        setAuthenticated();
        dispatch(setLogin(data.userId));
      })
      .catch((error) => console.error);
  };

  return (

        <form
          onSubmit={handleSubmit(onSubmit)}
          className="w-1/4"
        >
          <div className="mb-3">
            <label className="block text-sm font-medium mb-1">Username</label>
            <input
              {...register("userId", {
                required: "This field is required",
                maxLength: { value: 20, message: "Maximum length is 20 letters." },
                minLength: { value: 4, message: "Minimum length is 4 letters." },
                // pattern: { value: /^[a-z]+$/, message: "Lower alphabetic letter only." },
              })}
              type="text"
              className="w-full px-3 py-2 rounded text-gray-700 dark:text-gray-200 dark:bg-stone-900"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
            />
            <span className="text-rose-600 text-xs h-3">{errors?.userId?.message}</span>
          </div>
          <div className="mb-4">
            <label className="block text-sm font-medium mb-1">Password</label>
            <input
              {...register("userPW", {
                required: "This field is required",
                minLength: {
                  value: 4,
                  message: "Please input more than 4 characters.",
                },
              })}
              type="password"
              // required
              className="w-full px-3 py-2 rounded text-gray-700 dark:text-gray-200 dark:bg-stone-900"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              onKeyUp={checkCapsLock}
            />
            {errors.userPW && <span className="text-rose-600 text-xs">{(errors.userPW as FieldError).message}</span>}
            {isCapsLockOn && <span className="text-rose-600 text-xs">Caps Lock is ON</span>}
          </div>
          <input
            type="submit"
            value="Sign In"
            className="bg-teal-600 mt-8 text-white font-bold px-4 py-2 rounded hover:bg-teal-700 m-auto flex w-1/2 justify-center"
          />
        </form>

      <div className="flex justify-center gap-3 mt-10">
        <span className="text-base/10">{optInText[1]}</span>
        <input
          type="submit"
          value={optInText[2]}
          className=" text-teal-500 font-bold hover:text-teal-400 flex"
          onClick={() => setViewSignUp(!viewSignUp)}
        />
      </div>
    </div>
  );

I've read the git hub issue: https://github.com/react-hook-form/react-hook-form/issues/3750.
It seems like the questioner had the same issue as mine. I dug it up and tried some codes into mine but it even displayed an error with the 'username' section as well. Guess I didn't thoroughly understand the logic and follow it.

Can someone advise where to begin?