im trying to make todo app. i have checkboxes on each item and im trying to change the value of checked(iscompleted) to true when i click my checkbox and it does that, but it needs two clicks to do that why is that happening im trying to solve this for very long time now

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>
  );
};