[DX/UX] Lack of Documentation

[shehza-d]

I'm unhappy with documentation design choice, im still confused how would i use this with a simple form and how will i use it and how will use it with react-hook-form and get the value of textbox

my code

import useVerifyOtp from "@/hooks/auth/useVerifyOtp";
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,//shadcn
} from "@/components/other/OtpInput";

export default function OptForm() {
  const { onSubmit, register, errors, isLoading } = useVerifyOtp();

  return (
    <form noValidate onSubmit={onSubmit}>
      <h3 className="text-2xl text-secondary">Verification</h3>

      <p className="text-dark">
        Enter 4 digit OTP we sent you via email to continue
      </p>
      
      <InputOTP name="otp" maxLength={4}>
        <InputOTPGroup   name="pin" className="justify-center w-full">
          <InputOTPSlot className="min-w-14 md:min-w-20 w-full" index={0} />
          <InputOTPSlot className="min-w-14 md:min-w-20 w-full" index={1} />
          <InputOTPSlot className="min-w-14 md:min-w-20 w-full" index={2} />
          <InputOTPSlot className="min-w-14 md:min-w-20 w-full" index={3} />
        </InputOTPGroup>
      </InputOTP>
      
      <Button isLoading={isLoading} type="submit" className="w-full">
        Verify
      </Button>
  </form>
  );
}