How can i update a variable that checks if my checkbox is set?

I’m trying to build a simple todo list in react. My todo lists have the checkbox, the text for the todo list and a button to delete the todo. My problem is that, when i delete the todo when the checkbox is checked, a variable that i keep to control how many todo there is and how many todos have been marked as done(as checked) does’t update. So, for example, i have 5 todos in my list and i have three checked. If i delete one of the todos, my variable that counts three as done still will show 3 done when i actually have two.
The component where todos are listed

import styles from "./Todos.module.css"
import {PlusCircle} from "phosphor-react";
import { Todo } from "./Todo";
import { ChangeEvent, FormEvent, useState } from "react";

export function Todos()
{
   const [todoList, setTodoList] = useState([""]);
    const [newTodo, setNewTodo] = useState("");
    function handleTodo(e:FormEvent)
    {
       e.preventDefault();
       setTodoList([...todoList, newTodo]);
       setNewTodo("");
    }

    function handleTodoText(e:ChangeEvent<HTMLTextAreaElement>)
    {
        setNewTodo(e.target.value);
    }

    function handleTodoToDelete(todoToDelete:string)
    {
        const newTodoList = todoList.filter(todo =>{
                return todo != todoToDelete;
        })
        setTodoList(newTodoList);
    }

    let tasksCreated = todoList.length - 1;

    return (
        <div>
            <header>
                <form className={styles.todoBox} onSubmit={handleTodo}>
                    <textarea value={newTodo} className={styles.addTodo} required onChange={handleTodoText} name="addTodo" placeholder="Adicionar uma nova tarefa"></textarea>
                        <button type="submit">Criar <PlusCircle size={20}/> </button>
                </form>
            </header>
            <main>
                <div className={styles.monitorTodos}>
                        <p className={styles.tasksCreated}>Tarefas Criadas <span>{tasksCreated}</span></p>
                        <p className={styles.tasksDone}>Concluidas <span id="tasksDone">0</span></p>
                </div>
                <div className={styles.listTodos} >
                    {
                        todoList.map(todo =>{
                            if (todoList.length > 1 && todo.length != 0)
                                return <Todo todoText={todo} deleteTodo={handleTodoToDelete} todoCount={tasksCreated}/>
                        })                       
                    }
                </div>
            </main>

        </div>

    )
}

My todo component

    const [checked, setCheckedState] = useState(false);
    let checkboxesChecked:NodeListOf<HTMLInputElement> = document.querySelectorAll('input:checked');
    let checkBoxesCount = checkboxesChecked.length;
    var tasksDone = document.getElementById("tasksDone") as HTMLSpanElement | null;

    function handleChange(event:ChangeEvent<HTMLInputElement>) 
    {
        setCheckedState(event.target.checked);
    }

    if (tasksDone != null)
        tasksDone.innerHTML = checkBoxesCount.toString() + " de " + content.todoCount.toString();

    function handleDeleteComment()
    {
        content.deleteTodo(content.todoText);
    }

    return (
        <main className={styles.todo}>
             <div className={styles.todoContent}>
                <Checkbox 
                    name={content.todoText}
                    icon={<RadioButtonUncheckedRoundedIcon/>}
                    checked={checked}
                    onChange={handleChange}
                    checkedIcon={< CircleCheckedFilled /> }
                    sx={checkStyle}
                    />
                <span className={checked ? styles.done : styles.undone} >{content.todoText}</span>
            </div>
                <button onClick={handleDeleteComment}>
                    <Trash size={18}/>
                </button>
        </main>
    )

I tried updating the variable that counts the done todos inside the function that deletes the todo from the list and it didn’t even change the value of the variable.