I have this in my Row.jsx

  const Row = ({ move }) => {
  const focusRef = useRef(null)
  const check = e => {setValue(e.target.value)}
  return(
    <input type='text' ref={focusRef} key={move} id={move} readOnly={!(move === tries)} autoFocus={move === tries} value= 
      {value} onChange={check} />
  )}

My app.jsx

import { createContext, useState } from 'react';
import Row from './components/Row';
export const TriesContext = createContext()

function App() {
  const [tries, setTries] = useState(0)
  return (
    <div className='space-y-2'>
      <TriesContext.Provider value={{ tries, setTries }}>
        <Row move={0} />
        <Row move={1} />
        <Row move={2} />
        <Row move={3} />
        <Row move={4} />
        <Row move={5} />
      </TriesContext.Provider>
    </div>
  );
}

Actually I want the next components to be autoFocused after the first input is accepted. I have added the autoFocus={move === tries} but that doesnt work apparently.

note that the inputs have to filled in ascending order(i have made the inputs readonly)and that is working. Can I get some help?