pass data from multiple check boxx to api only when a submit button is clicked :react js

pass data from multiple check box to api only when a submit button is clicked

i am having this accordions in my website which has many check boxes right now my code works as when i click a check box its data only is being updated instandly

i am trying to covert it such that when i click on check box all checkbox values get stored in state and at last when i click submit only the data is passesd to api the data stored are given bellow

 <div className="accordion-item">
                    <div
                      className="accordion-title gradiantblur"
                      onClick={() => this.navClose("Abdomen")}
                      
                    >
                      <div>Abdomen</div>{" "}
                      <i class="fa fa-plus" aria-hidden="true"></i>
                    </div>
                    {this.state.Abdomen ? (
                      <div className="accordion-content  tableforsymtm">
                        {this.state.items
                          .filter((person) => person.category == "Abdomen")
                          .map((personData, key) => {
                            return (
                              <span className="trforsymtm">
                                <td key={personData.id}>
                                  <input
                                  
                                    data-id={personData.id}
                                    type="checkbox"
                                    id={personData.id}
                                    checked={personData && personData.positive}
                                    onChange={(e) =>
                                      this.handleCheckClick(e, "items", key)
                                    }
                                </td>
                                <td className="tdoneline">{personData.name}</td>
                              </span>
                            );
                          })}
                      </div>
                    ) : null}
                  </div>
                  {/* ))} */}
                  <div className="accordion-item">
                    <div
                      className="accordion-title gradiantblur"
                      onClick={() => this.navClose("Mental")}
              
                    >
                      <div>Mental Health</div>{" "}
                      <i class="fa fa-plus" aria-hidden="true"></i>
                    </div>
                    {this.state.Mental ? (
                      <div className="accordion-content  tableforsymtm">
                        {this.state.items
                          .filter(
                            (person) => person.category == "Mental Health"
                          )
                          .map((personData, key) => {
                            return (
                              <span className="trforsymtm">
                                <td key={personData.id}>
                                  <input
                                    data-id={personData.id}
                                    type="checkbox"
                                    id={personData.id}
                                    checked={personData && personData.positive}
                                    onChange={(e) =>
                                      this.handleCheckClick(e, "items", key)
                                    }
                                   
                                </td>
                                <td className="tdoneline">{personData.name}</td>
                              </span>
                            );
                          })}
                      </div>
                    ) : null}
                  </div>

  handleCheckClick = (e, stateVal, index) => {
    //modifying the state based on chec value
    let prevState = [...this.state[stateVal]];
    prevState[index].positive = e.target.checked;
    console.log(index);
    this.setState({ [stateVal]: prevState });
    var date = moment(this.state.dateState).format("YYYY-MM-DD");
    const { id, checked } = e.target.dataset;
    console.log(stateVal);
    if (e.target.checked) {
      var checkbox = "True";
    } else {
      var checkbox = "False";
    }

    const Data = {
      positive: checkbox,
      date: date,
      id: id,
    };

full code i have added in code sandbox https://codesandbox.io/s/smoosh-dew-8y35vp?file=/src/App.js

i want data to be passed something like this

[
    {
        "date" : "2022-02-15",
        "id" : 6,
        "positive" : true
    },
    {
        "date" : "2022-02-15",
        "id" : 5,
        "positive" : true
    },
    {
        "date" : "2022-02-15",
        "id" :7,
        "positive" : true
    },
    {
        "date" : "2022-02-15",
        "id" : 11,
        "positive" : true
    },
    {
        "date" : "2022-02-15",
        "id" : 4,
        "positive" : true
    }
]

from pass data from multiple check boxx to api only when a submit button is clicked :react js