pasar datos de la casilla de verificación múltiple a la API solo cuando se hace clic en un botón de envío

tengo estos acordeones en mi sitio web cuando hago clic en la casilla de verificación, todos los valores de la casilla de verificación se almacenan en el estado y, por último, cuando hago clic en enviar, solo los datos se pasan a la API, los datos almacenados se proporcionan a continuación

 const getAccordionItem = ({ key, label }) => { const source = key === "Custom" ? "custom" : "items"; return ( <div className="accordion-item" key={key}> <div className="accordion-title gradiantblur" onClick={() => navClose(key)} > {/* // onClick={setActiveCurrentIndex(item[0].date)}> */} <div>{label}</div> <i className="fa fa-plus" aria-hidden="true"></i> </div> {state[key] ? ( <div className="accordion-content tableforsymtm"> {(source !== "custom" ? state[source].filter( (item) => item.category === label || item.category === key ) : state[source] ).map((item, index) => { return ( <span key={`${key}__${item.id}__${index}`} className="trforsymtm" > <td> <input // className="invinsiveinput" data-id={item.id} type="checkbox" id={item.id} checked={item && item.positive} onChange={(e) => handleCheckboxChange(e, source, item.id)} /> </td> <td className="tdoneline"> <label htmlFor={item.id}>{item.name}</label> </td> </span> ); })} </div> ) : null} </div> ); };

 const handleCheckboxChange = (e, stateKey, itemId) => { const stateItems = state[stateKey]; const index = stateItems.findIndex((item) => item.id === itemId); setState((prevState) => ({ ...prevState, [stateKey]: [ ...stateItems.slice(0, index), { ...stateItems[index], positive: e.target.checked, }, ...stateItems.slice(index + 1), ], })); };

enviar el botón hacer clic

 const chekbox = (e) => { e.preventDefault(); const headers = { }; const data = { items: [...state.items] .filter((item) => item.positive) .map((item) => ({ date: state.today, symptom: item.id, positive: item.positive, })), }; const custum = { items: [...state.custom] .filter((item) => item.positive) .map((item) => ({ date: state.today, symptom: item.id, positive: item.positive, })), }; console.log(custum); axios.post("/customer/submit-multiple/", data, { headers: headers, }); axios .post("/customer/submit-custom-multiple/", custum, { headers: headers, }) .then(() => { alert("was submitted"); window.location.reload(); }) .catch((error) => { alert("Cannot add submittedagain"); }); };

código completo que he agregado en el código sandbox nota actualizada según la respuesta de Hirens https://codesandbox.io/s/objective-jone5tlds

el problema al que me enfrento ahora es que si un usuario hace clic en una casilla de verificación, su valor de verificación se agrega al estado y si el usuario desmarca la casilla de verificación antes de enviar, habrá 2 entradas en la matriz

• uno como marcado (verdadero)
• 2do como no marcado (falso)

por lo tanto, los valores de los datos de la casilla de verificación 2 no se pueden enviar a la matriz y pasar a la API

quiero que los datos se pasen algo como esto

estoy recibiendo el error 500

 [ { "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 } ]