I am trying to make an otp submit form. On my computer everything works fine but it gets messed up when using virtual keyboard

This is my layout for otp screen. When I enter the digits of otp one by one the focus has to shift right one box automatically after sometime. This is happening correctly in case of computers but it is not happening in case of virtual keyboards when the site is opened on mobile phones.

OTP screen design

Here is an example of the error I am facing on mobile view. As you can see that rather than having one digit in one box it takes all the input in one box only.

OTP screen on mobile

Here is my JS code for controlling the event :

codes.forEach((code, idx) => {
code.addEventListener('keydown', (e) => {
    if (e.key >= 0 && e.key <= 9) {
        codes[idx].value = '';
    } else if (e.key === 'Backspace') {
        codes[idx].value = '';
        setTimeout(() => codes[idx - 1].focus(), 10);
    } else {
        e.preventDefault();
    }
});

});

Here is my HTML code

<form action="" id="otp-form" method="POST">
                    <div class="code-container flex flex-wrap gap-1 md:gap-2 mx-auto justify-center items-center">
                        <input type="number" class="code h-9 w-9 sm-micro:w-12 sm-micro:h-12 text-center text-md md:text-2xl text-gray-700 rounded-md md:rounded-lg shadow focus:outline-none focus:border-black focus:ring-transparent focus:shadow-lg font-medium border-2 border-gray-500"
                            placeholder="-" min="0" max="9" name="otp[0]" required>
                        <input type="number" class="code h-9 w-9 sm-micro:w-12 sm-micro:h-12 text-center text-md md:text-2xl text-gray-700 rounded-md md:rounded-lg shadow focus:outline-none focus:border-black focus:ring-transparent focus:shadow-lg font-medium border-2 border-gray-500"
                            placeholder="-" min="0" max="9" name="otp[1]" required>
                        <input type="number" class="code h-9 w-9 sm-micro:w-12 sm-micro:h-12 text-center text-md md:text-2xl text-gray-700 rounded-md md:rounded-lg shadow focus:outline-none focus:border-black focus:ring-transparent focus:shadow-lg font-medium border-2 border-gray-500"
                            placeholder="-" min="0" max="9" name="otp[2]" required>
                        <input type="number" class="code h-9 w-9 sm-micro:w-12 sm-micro:h-12 text-center text-md md:text-2xl text-gray-700 rounded-md md:rounded-lg shadow focus:outline-none focus:border-black focus:ring-transparent focus:shadow-lg font-medium border-2 border-gray-500"
                            placeholder="-" min="0" max="9" name="otp[3]" required>
                        <input type="number" class="code h-9 w-9 sm-micro:w-12 sm-micro:h-12 text-center text-md md:text-2xl text-gray-700 rounded-md md:rounded-lg shadow focus:outline-none focus:border-black focus:ring-transparent focus:shadow-lg font-medium border-2 border-gray-500"
                            placeholder="-" min="0" max="9" name="otp[4]" required>
                        <input type="number" class="code h-9 w-9 sm-micro:w-12 sm-micro:h-12 text-center text-md md:text-2xl text-gray-700 rounded-md md:rounded-lg shadow focus:outline-none focus:border-black focus:ring-transparent focus:shadow-lg font-medium border-2 border-gray-500"
                            placeholder="-" min="0" max="9" name="otp[5]" required>
                    </div>
                    <div class="mt-5 w-full flex justify-center items-center">
                        <button href="" class="mx-auto bg-blue-600 px-3 py-2 rounded-md text-white font-bold">Verify OTP</button>
                    </div>
                </form>