Hice una entrada OTP en React Puedes ver esta imagen . Una línea es una entrada y tengo 6 entradas. Las entradas funcionan, eso no es un problema. Necesito cuando se abre el componente, la primera entrada debe ser enfoque automático. Cuando uso <input autofocus/> la última entrada es el enfoque automático, necesito la primera entrada.

Mi componente principal

 const [code, setcode] = useState(new Array(6).fill(""));

componente de la fiscalía

 <div className="digit-inputs"> {props.code.map((data, index) => { return ( <input disabled={props.second <= 0 ? true : false} type="text" className="otp-field" name="otp" maxLength={1} key={index} style={data ? { borderBottom: "3px solid #7dbf2a" } : { borderBottom: "3px solid grey" }} value={data} onChange={(e) => handleChange(e.target, index)} onFocus={(e) => e.target.select} /> ); })} </div>

mi funcion

 const handleChange = (element, index) => { if (isNaN(element.value)) return false; props.setcode([...props.code.map((d, indx) => (indx === index ? element.value : d))]); //Focus next input if (element.nextSibling) { element.nextSibling.focus(); } };