How to organize checkboxes in react?

Question

JavaScript

Data (data) from the view api (go to the component through props):

{
  item1: {
    value1: bool,
    value2: bool
  },
  item2: {
    value1: bool,
    value2: bool
  }
}

Conclusion (roughly speaking):

data.map(item => (
   <div>
      <Checkbox //для value1
         checked={item.value1}
         onChange={отправить запрос на сервер для изменения этого value и подождать ответа}
       />
      <Checkbox //для value2
         checked={item.value2}
         onChange={отправить запрос на сервер для изменения этого value и подождать ответа}
       />
      <Checkbox //для "выделить все" для каждого отдельного item
         checked={item.value1 && item.value2}
         onChange={отправить запрос на сервер для изменения всех value и подождать ответа}
       />
  </div>
 ))

While the answer is coming, add a state of type "loading" to each checkbox for a single item or to all, if "select all" is changed.
What is the best way to organize work with checkboxes in this case? Where to store the temporary "loading" value for each? For example, add additional fields to the original data? Or a separate object in a state of type "checkboxes"?

Answer 1

I would try adding an array of the names of the elements being processed.