Input OTP

<FormField
          control={form.control}
          name="one_time_password"
          render={({ field }) => (
            <FormItem>
              <FormLabel>One-Time Password</FormLabel>
              <FormControl>
                <InputOTP
                  maxLength={6}
                  {...field}
                  value={typeof field.value === "string" ? field.value : ""}
                  onChange={(nextValue) =>
                    form.setValue(field.name, nextValue, {
                      shouldValidate: true,
                      shouldDirty: true,
                      shouldTouch: true
                    })
                  }
                >
                  <InputOTPGroup>
                    <InputOTPSlot index={0} />
                    <InputOTPSlot index={1} />
                    <InputOTPSlot index={2} />
                  </InputOTPGroup>
                  <InputOTPSeparator />
                  <InputOTPGroup>
                    <InputOTPSlot index={3} />
                    <InputOTPSlot index={4} />
                    <InputOTPSlot index={5} />
                  </InputOTPGroup>
                </InputOTP>
              </FormControl>
              <FormDescription>Please enter the one-time password sent to your phone.</FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />