Cuando intento compilar mi archivo App.jsx, aparece el siguiente error:

Error no detectado: los objetos no son válidos como hijos de React (encontrado: objeto con claves {presente1}). Si tenía la intención de representar una colección de niños, use una matriz en su lugar.

 import React, { useState } from "react"; import Axios from "axios"; function Attendance() { const [attedanceList, setAttedanceList] = useState([]); const [attendanceMarking, setAttendanceMarking] = useState({}); Axios.get("http://localhost:9000/attendance").then((response) => { setAttedanceList(response.data.data.values); }); function changeValue(event) { let { name, value } = event.target; setAttendanceMarking((attendanceMarking) => { return { ...attendanceMarking, [name]: value }; //error here }); console.log(attendanceMarking); } function sendAllValues() { Axios.post("http://localhost:9000/attendance", { attendanceMarking }); } return ( <form> {attedanceList.map((val, index) => { if (index !== 0) { let attendance = "attendance" + index; let present = "present" + index; let absent = "absent" + index; return ( <div key={index}> <div> {val[0]} {val[1]} <input type="radio" id={present} name={attendance} value="1" checked={attendanceMarking === "1"} onChange={changeValue} /> <label for={present}>Present</label> <input type="radio" id={absent} name={attendance} value="0" checked={attendanceMarking === "0"} onChange={changeValue} /> <label for={absent}>Absent</label> </div> </div> ); } })} <button type="submit" onClick={sendAllValues}> Submit </button> </form> ); }

¿Cómo puedo renderizar objetos para poder actualizar el estado y evitar errores?

Captura de pantalla de error