Как использовать реагировать на немедленное обновление идентификатора в событии onclick

Question

Я пытаюсь создать приложение с интерактивными кнопками, чтобы создать список задач с упорядоченным id крючком для каждой задачи. Например

id name email status
1 john  dfdf  check
2 tony  sdsd  check
3 tiger eree  check

У меня есть образецNewTask в качестве задачи по умолчанию. Мне нужно адаптировать задачу, чтобы создать новую задачу. Я хотел бы сделать обновление id автоматически по порядку. В начале задачи не существует, поэтому длина задачи равна 0. Однако первый идентификатор и всегда будет значением по умолчанию, равным 3, а не 1. И Второй id есть 0, а не 2. Третий - 1, а не 3. Всегда есть смещение 2. Даже если я использую id = task.id=tasks.length+2 в функции handleTaskChange. Первый идентификатор всегда 3. Кто-нибудь знает, как справиться с этим правильно?

Вот мой код, связанный с проблемой в app.js

const sampleNewTask={
    uuid: uuidv4(),
    id: '3',
    name: 'john',
    email: 'dfdf',
    status: 'check'
}
const sampleTasks=[]
const [newTask, setNewTask] = useState(sampleNewTask);
const [tasks, setTasks] = useState(sampleTasks);
function handleTaskAdd(newTask){
    setTasks([...tasks, newTask])
}
function handleTaskChange(task){
    const newTask = task
    newTask.uuid = uuidv4()
    newTask.id = tasks.length+2
    setNewTask(newTask)
}

Ниже приведен файл функции jsx, и определено lengthкак tasks.length, который является длиной массива задач.

export default function TaskPanel({length, task}) {
    const {
        handleTaskAdd,
        handleTaskChange
    } = useContext(TaskContext)

    function handleChange(changes){
        handleTaskChange({...task, ...changes})
    }
    return (
    <div>
    <span 
            className="general__checkmark"
            onClick={()=> {
           // task.id=length
                 handleChange({id: length})
                 handleTaskAdd(task)
            }
     }
     />
    </div>
)
}

Я знаю, проблема в том, что когда я нажимал кнопку добавления, длина задач все еще составляла 0, а затем функция handleTaskAddуже добавлено sampleNewTask. Поэтому первый id всегда 3. И я не знаю, как сразу установить значение id, когда происходит событие onClick.