From message event in ios web

I have an webapp that need an 6 digits code from text message, the input is the following

OTP example

the expected behaviour is the cursor go to the next input and copy the following number, this works in my browser, but in ios whith “from message” function, copy all number in first input

this is the code

const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
    e.preventDefault()
    const matchNotOtpTypeValues =
      otpType === 'numeric' ? /[^0-9]/gi : /[^0-9a-zA-Z]/gi
    const pasteValue = e.clipboardData
      .getData('text')
      .replace(matchNotOtpTypeValues, '')

    if (
      pasteValue.length < 1 ||
      pasteValue.length > otpLength ||
      !checkOtp(pasteValue)
    )
      return
    const individualValues = pasteValue.split('')

    if (pasteValue.length === 1) {
      setOptValues({ ...otpValues, [e.currentTarget.name]: pasteValue })

      return
    }
    const newObj: Record<string, string> = { ...otpValues }

    individualValues.forEach((value, index) => {
      newObj[`${name}-${index}`] = value
    })
    setOptValues(newObj)
    const isComplete = pasteValue.length === otpLength

    setIsReadyToSubmit(isComplete)

    if (isComplete) {
      e.currentTarget.blur()
    } else {
      const nextInput = document.querySelector(
        `input[name=${name}-${pasteValue.length}]`
      ) as HTMLInputElement | null

      if (nextInput) {
        nextInput.focus()
      }
    }
  }