React Input onChange before onKeyDown - reactjs

Question

const {useMemo, useState, createRef} = React;
const InputPIN = (props) => {
const inputRefs = useMemo(() => Array(4).fill(0).map(i=> createRef()), []);
const [values, setValues] = useState(Array(4).fill(''));
function handleChange(e, index){
const typed = e.target.value.toString();
setValues((prev)=>
prev.map((i,jndex) => {
if(index === jndex) return typed[typed.length-1];
else return i;
})
);
if (typed !=='' && inputRefs[index + 1]) inputRefs[index + 1].current.focus();
}
function handleBackspace(e, index) {
if(e.keyCode === 8){
if(inputRefs[index-1]){
inputRefs[index - 1].current.focus();
}
}
}
return (
<label className="InputPIN">
{
new Array(4).fill(0).map((i,index)=>(
<input style={{width:50}} key={index} value={values[index]} onKeyDown={(e)=>handleBackspace(e,index)} type="text" ref={inputRefs[index]} onChange={(e)=>handleChange(e,index)} /> ) )
}
</label>
)
}
const App = () => {
return (
<InputPIN />
)
}
ReactDOM.render(<App />, document.getElementById('root'));
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<div id="root" />
I am making an InputPIN component.
When I typed a text, input focusing would be moved to the next input.
and When I typed the backspace, input focusing would be moved to the previous input after removing a present text. But It doesn't work.
on my code, I am using onKeyDown() and onChange().
and I guess onKeyDown() has a higher priority than onChange().
so, I've tried to change onKeyDown() to onKeyUp().
but it has a side effect that I don't want.

Answer 1

EDIT: The whole answer has been updated after the discussion in comments.
I think you can just use a custom handler function, and rewrite a little the two handlers methods:
const manualUpdateInputs = (index) => {
const newValues = [...values];
newValues[index] = '';
inputRefs[index].current.focus();
}
const handleChange = (e, index) => {
const newValues = [...values];
const typed = e.target.value.toString();
newValues[index] = typed;
if (typed !=='' && inputRefs[index + 1]) {
inputRefs[index + 1].current.focus();
}
setValues(newValues);
}
const handleBackspace = (e, index) => {
if(e.keyCode === 8){
if(inputRefs[index-1] && e.target.value === '') {
manualUpdateInputs(index - 1);
}
}
}
I've changed the way you update values but you can keep your way, it doesn't change. What matters is the use of manualUpdateInputs.
The "trick" was that handleBackspace is triggered anytime you click a key in the keyboard, but handleChange was not triggered if you clicked a backspace with an empty <input>.
Tell me if the behavior obtained with this implementation is what you wanted (it makes sense to me, but maybe it's not what you wanted).