I can`t add data into array before sending it to the backend

Question

I'm new to javascript/react and I'm having a problem that I can't solve, I've searched everywhere, but there's no solution that works.

Problem: I have a button that adds new tasks to my tasks array. After adding these tasks, I want to push this new array to the backend. The problem is that when I send it to the backend, the array always goes without the last data added. Even when I give console.log(array), the array appears without the last data added. The most curious thing is that below I use array.map and everything works perfectly.

Here is my index.js:

const Main = () => {

  const [inputValue, setInputValue] = useState("")
  const [todoList, setTodoList] = useState([])
  const [name, setName] = useState([])


  useEffect(() => {
    fetch('/users').then(response => response.json().then(data => {
      console.log(data.name);
      setName(data.name)
      setTodoList(data.tasks)
    }))
  }, [])


  const addTask = (data) => {
    axios.post('/', data)
      .then(() => {
        console.log("connection ok")
      })
      .catch(() => {
        console.log("conncetion nok")
      })

  }

  const HandleAddClick = () => {

    if (!inputValue.replace(/\s/g, '').length) {
    }
    else {
      setTodoList(todoList => todoList.concat(inputValue));
      setInputValue("");
      addTask(todoList);
      console.log(todoList)
    }
  }

  const HandleClearClick = () => {
    if (confirm('Are you sure you wanna clear all tasks?')) {
      setTodoList([])
    }
  }

  const HandleDelClick = (index) => {
    if (confirm('Are you sure you finished this task?')) {
      const newTodoList = todoList.filter((_, i) => i !== index);
      setTodoList(newTodoList)
    }
  }
  return (

    <div className="principal">
      <div className="container2">
        <b><h1 className='title'>TO-DO LIST, {name}</h1></b>
        <div className="input-group mb-3">
          <input
            onChange={(event) => setInputValue(event.target.value)}
            value={inputValue}
            className='form-control'
            type="text"
            placeholder='Add your new task' />

          <button onClick={HandleAddClick} className='input-group-text btn btn-primary rounded-3'>+</button>

        </div>

        <div class="tasks">
          <ul className='list-group'>
            {
              todoList.map((task, index) => <li key={index} className='list-group-item post'>{task}<button onClick={() => {
                HandleDelClick(index);
              }} class="btn-del options">✔</button></li>)
            }
          </ul>
        </div>
        <div class="todo-footer">
          You have {todoList.length} pending tasks.

          <button onClick={HandleClearClick} class="input-group-text btn btn-secondary rounded-"> Clear All</button>

        </div>
      </div>
    </div>
  );
}

export default Main;

and here`s the important part:

const HandleAddClick = () => {

    if (!inputValue.replace(/\s/g, '').length) {
    }
    else {
      setTodoList(todoList => todoList.concat(inputValue));
      setInputValue("");
      addTask(todoList);
      console.log(todoList)
    }
  }

In this part above, when I use console.log(todoList) it desplays the data like I didn`t update my TodoList.

const addTask = (data) => {
    axios.post('/', data)
      .then(() => {
        console.log("connection ok")
      })
      .catch(() => {
        console.log("conncetion nok")
      })

  }

<button onClick={HandleAddClick} className='input-group-text btn btn-primary rounded-3'>+</button>

I've tried using promise, settimeout, await, etc and nothing works. Can anyone help me out?