I'm making a gym to do list, to count the sets on an exercise. I want to create a task with a button, than change the value of an input to set my max sets, and click the increment set button to increment sets on the task that wasn't finished yet.
My problem is that I don't know how to access the sets and maxSets from the exercises.map in the increment set function.

Also I don't know how to keep track of each of the maxSets input values
<input value={maxSets} onInput={e => maxSets(e.target.value)}
(that won't work but I made this so the person reading this can understand my idea)

And the last thing is that I don't know how to set the types of sets, maxSets and index to a string

  const [exercises, setExercises] = useState([])
  const [exercise, setExercise] = useState("")

  function addExercise(){
    setExercises(e => [...e, exercise])
    setExercise("")
  }

  function incermentSet(index){
    const newExercises = [...exercise]
    index = 0

    if(newExercises[index].sets < newExercises[index].maxSets){ 
      newExercises[index].sets += 1
    }
    else{
      return
    }

    setExercises(newExercises)
  }

  return (
    <div className="bg-gray-800 w-screen h-screen text-white">
      <h1 className="text-[40px]">Gym to do list</h1>
      <button onClick={addExercise} className="bg-transparent border-2 border-green-500 rounded-lg">Add exercise</button>
      <button onClick={incermentSet} className="bg-transparent border-2 border-purple-500 rounded-lg">Increment set</button>

      <ul>
          {exercises.map((sets, maxSets, index) =>
            <li key={index}>
              <input className="bg-transparent border-2 border-yellow-500 rounded-lg"></input>
              <input value={maxSets} onInput={e => maxSets(e.target.value)} className="w-[20px] bg-transparent border-2 border-yellow-500 rounded-lg"></input>
              <a>x|</a>
              <a>{sets}</a>
            </li>
        )}
      </ul>
    </div>
  );
}