I use this input for phone numbers, where the prefix is always 05. As a result, I want the autoFocus to be applied to the third field (index 2) after the prefix.
Currently, the autoFocus property is always applied to the first element - i === 0, which leads to a poor user experience when the defaultValue includes a constant prefix like 05.
To improve this, I suggest considering the length of the defaultValue property when the autoFocus property is true to determine where it should be applied. Instead of using
autoFocus={autoFocus && i === 0}
It would be better to use:
autoFocus={autoFocus && i === defaultValue.length}
This way, the focus will automatically move to the third field (index 2) after the pre-filled prefix, providing a smoother user experience.