Te faltan claves del componente Task y estás usando componentes no controlados, por lo que cuando hay una nueva representación, no le estás diciendo a React lo suficiente sobre qué elemento que existe en el DOM corresponde a qué <Task> . La mejor solución sería:

• Use componentes controlados en lugar de componentes no controlados; los componentes son generalmente más predecibles y utilizables con el estado, ya que la vista debe fluir desde el estado. (Si usa componentes controlados, también puede evitar tener que recurrir a una referencia). Tanto la entrada de texto como las casillas de verificación se pueden controlar.
• Use teclas al regresar de .map
• No cambies el estado en React; task.checked = !task.checked; debe ser refactorizado.

Algo del estilo de:

 function TaskList({ className, tasks, setTasks }) { const [value, setValue] = useState(''); // <------------------- return ( <div className={className}> <ul className="grow overflow-y-scroll"> {tasks.map((task, i) => ( <Task key={task.description} // <------------------- description={task.description} checked={task.checked} // <------------------- onChange={() => { setTasks( // <------------------- tasks.map( (task, j) => i !== j ? task : { ...task, checked: !task.checked } ) ); }} /> ))} </ul> <input className="my-2 border-b-2 border-blue-300" placeholder="Enter task description..." value={value} // <------------------- onChange={(e) => setValue(e.currentTarget.value)} // <------------------- ></input> <button className="rounded-md bg-blue-400 w-full p-4 text-white text-2xl" onClick={() => { setTasks([ ...tasks, { description: value, checked: false }, // <------------------- ]); }} > ...

 function Task({ description, onChange, checked }) { // <------------------- return ( <li className="flex flex-row my-2"> <input className="mx-2" type="checkbox" onChange={onChange} checked={checked} /> // <------------------- <span>{description}</span> </li> ); }