Не могу изменять значение в input REACT

Хочу изменять значение ипнута и потом измененный инпут отправлять на бд при нажатии кнопки save. Однако я сейчас вообще не могу изменять значение в любом инпуте. Подозреваю что проблеме в том что компонент постоянно рендериться и берет значение из бд, но не уверен. Могу только насильно поменять значение через .value но сам писать и вносить изменения в input я не могу.

код компонента:

const TableRow = ({ workerid, firstName, lastName, job_name, hourly_rates, fixed_fee }) => {
  const [isEditable,setEditable] = useState(false);
  const [name,setName] = useState("")
  const [last,setLast] = useState("")
  const [job,setJob] = useState("")
  const [rates,setRates] = useState("")
  const [fee,setFee] = useState("")    

  const deleteInfo = async () => {
    try {
      console.log(workerid)
      const res = await axios.post("http://localhost:8080/deleteWorker" , {workerid:workerid})
      .then((response) => {
        if (response.data) {
          console.log(response.data)
          console.log("есть")
        } else {
          console.log("нет")
        }
      })
    }catch (error) {
      console.log(error)
    }
  }

  const editInfo = async () => {
    console.log("я редактирую строку с id: " + workerid)
    setEditable(true)
    const workerString = document.querySelectorAll(".id-"+ workerid.toString() + " input")

    Object.keys(workerString).map((item) =>{     
      workerString[item].disabled = false
      workerString[item].addEventListener("change",()=>{
        workerString[item].value = "test"            
      })     
  }

    const changeInfo =  (row) => {
        row.value = "test"    
    }
  
  const changedInfo = (row) => {
    console.log(row)    

    Object.keys(row).map((item) =>{
      // console.log(workerString[item])
      row[item].disabled = true
    })
  }    

  // const deleteInfo = () =>{
  //   console.log("я удаляю строку с id: " + workerid)    
  // }

  return (
    <tr key={workerid} className= {"id-" + workerid} >
      <td>  
            <input type="text" className='workerInput' value={firstName}  disabled/>
            <input type="text" className='workerInput'  value={lastName}  disabled/>
        </td>
      <td>
        <input type="text" className='workerInput' value={job_name} disabled/>
      </td>
      <td>
        <input type="text" className='workerInput' value={hourly_rates} disabled/>
        </td>
      <td>
        <input type="text" className='workerInput' value={fixed_fee} disabled/>
      </td>
      <td>
        <button onClick={() => editInfo()}>Edit</button>
        <button onClick={() => deleteInfo()}>Delete</button>
      </td>
    </tr>

  )
}

export default TableRow;

Код родителя:

const HourlyRates = () => {
  const [workers,setworkers] = useState(null)
  const [isReady, setReady] = useState(false);

  useEffect(()=>{

    try {
      const res = axios.post("http://localhost:8080/hourlyRates",{
    }).then((response)=>{
      if(response.data){
        setworkers(response.data)
        console.log("++")
        console.log(response.data)
        setReady(true); // Проверка выполнена

      }else{
        console.log("--")
      }
      
  })
    } catch (error) {
      console.log("purums")
    }   
  },[])
  // if (isReady){
  //   console.log(workers)
  // }

  return (
    <>    
        <LoginedHeader/>
        <table>
        <thead>
          <tr >
            <th>Mentor name</th>
            <th>Type of jobs</th>
            <th>Hourly rates</th>
            <th>Fixed fee</th>
          </tr>
        </thead>
          <tbody>
            {isReady && workers?.data?.map(item =>(
              <TableRow 
              key = {item.workerid}
              workerid = {item.workerid}
              firstName={item.firstName}
              lastName={item.lastName}
              job_name={item.job_name}
              hourly_rates = {item.hourly_rates}
              fixed_fee={item.fixed_fee}
            />
             ) )
          }                

            <button> SAVE </button>
          </tbody>

        </table>

        <Footer />

    </>
  )
}

export default HourlyRates;