Tengo esta casilla de verificación donde el usuario puede marcar todas las casillas de verificación. No puedo guardar esto en Firestore ya que tiene un error cada vez que lo envío y dice:

 TypeError: s.indexOf is not a function

y si marco todas las casillas de verificación, console.log(state); muestra esto:

 item1: true item2: true item3: true

lo que quería era justo cuando se hizo clic en la casilla de verificación específica (elemento 1 y elemento 2), solo generará algo como esto:

 item1 item2

A continuación se muestran los códigos completos:

 const component = (props) => { const [state, setState] = useState({ Fever: false, Headache: false, Nausea: false, "Muscle Pain": false, }); const handleCheckbox = (event) => { console.log(event.target.value); setState({ ...state, [event.target.name]: event.target.checked }); }; const handleSubmit = (e) => { e.preventDefault(); for (const p in state) { if (!state[p]) delete state[p]; } try { const userRef = firestore.collection("users").doc(uid); const ref = userRef.set({ state, }); console.log(" saved"); } catch (err) { console.log(err); } }; return ( <Container> <form onSubmit={handleSubmit}> <FormGroup style={{ alignContent: "center", padding: "1rem" }}> <FormControlLabel control={ <Checkbox checked={state.Fever} name="Item1" color="primary" value="Item1" onChange={handleCheckbox} /> } label="Item1" /> <FormControlLabel control={ <Checkbox checked={state.Headache} name="Item2" color="primary" value="Item2" onChange={handleCheckbox} /> } label="Item2" /> <FormControlLabel control={ <Checkbox checked={state.Nausea} name="Item3" color="primary" value="Item3" onChange={handleCheckbox} /> } label="Item3" /> </FormGroup> <Button type="submit">Submit</Button> <br /> </form> </Container> ); }; export default component;

¿Cómo puedo obtener los valores de item1, item2 y item3 para poder guardarlo tal como está en el almacén de incendios? Gracias.