Привет , помогите решить 1 проблему - я сделал

из 1 инпута 6 кругов (для подтверждения почты кодом ) и пытаюсь сделать так что бы при нажатии на любой все равно начинало вписивать с 1 ,но не работает ,почему? const [code, setCode] = useState(['', '', '', '', '', '']);
const inputRefs = Array(6).fill(0).map((_, i) => React.createRef());

const handleInputChange = (e, index) => {
const value = e.target.value;
if (/^\d*$/.test(value) && value.length <= 1) {
const newCode = [...code];
newCode[index] = value;
setCode(newCode);
if (value !== '' && index < 5) {
inputRefs[index + 1].current.focus();
}
}
};

const handleKeyDown = (e, index) => {
if (e.key === 'Backspace' && index > 0 && code[index] === '') {
const newCode = [...code];
newCode[index - 1] = '';
setCode(newCode);
inputRefs[index - 1].current.focus();
}
};

const isCodeComplete = code.every((digit) => digit !== '');
const doneButtonClass = isCodeComplete ? 'done-button-green' : 'done-button';

const handleFirstCircleClick = () => {
inputRefs[0].current.focus();
}; <div className="circle-code-input">
<div className="circle" onClick={handleFirstCircleClick}>
{code[0]}
<input
ref={inputRefs[0]}
type="text"
value={code[0]}
onChange={(e) => handleInputChange(e, 0)}
onKeyDown={(e) => handleKeyDown(e, 0)}
/>
</div>
{code.slice(1).map((digit, index) => (
<div key={index} className="circle">
{digit}
<input
ref={inputRefs[index + 1]}
type="text"
value={digit}
onChange={(e) => handleInputChange(e, index + 1)}
onKeyDown={(e) => handleKeyDown(e, index + 1)}
/>
</div>
))}


</div>

Я вроде как написал фокус на 1 круг - const handleFirstCircleClick = () => { inputRefs[0].current.focus(); но все равно не работает