Estoy tratando de hacer una aplicación de tareas pendientes. tengo casillas de verificación en cada elemento y estoy tratando de cambiar el valor de marcado (iscompletado) a verdadero cuando hago clic en mi casilla de verificación y lo hace, pero se necesitan dos clics para hacer eso, ¿por qué sucede eso? Estoy tratando de resolver esto por mucho tiempo Ahora

 import React from "react"; import { useState, useEffect } from "react"; import { ControlPanel } from "./ControlPanel"; export const Input = () => { const [todos, setTodos] = useState([]); const [newTodo, setNewTodo] = useState(""); const [isCompleted, setIsCompleted] = useState(false); const handleChange = (e) => { setNewTodo(e.target.value); }; const handleSubmit = (e) => { e.preventDefault(); const adding = { task: newTodo, id: Math.floor(Math.random() * 100000), checked: isCompleted }; if (newTodo.length) { setTodos(todos.concat(adding)); setNewTodo(""); } }; const checkbox = (index) => { const check = [...todos]; check[index].checked = isCompleted setIsCompleted(!isCompleted); setTodos(check); console.log(todos); }; return ( <div> <form onSubmit={handleSubmit}> <input type="text" value={newTodo} onChange={handleChange} placeholder="what needs to be done?" /> <ul> {todos && todos.map((todo, index) => { return ( <div> <input checked={todo.checked ? true : false} type="checkbox" onChange={() => checkbox(index)} /> <li key={todo.index}>{todo.task}</li> </div> ); })} </ul> <ControlPanel todos={todos} /> </form> </div> ); };