Вопрос про обновление переменной-состояния после выхода из обработчика события

В документации к Реакт написано: ‟React ожидает, пока не будет выполнен весь код в обработчиках событий, прежде чем обрабатывать ваши обновления состояния”. То есть переменная-состояние изменится тогда, когда завершится функция-обработчик, внутри которой изменяется состояние. Но если я напишу компонент, где в функции-обработчике после изменения состояния я поставлю задержку, то всё-равно при нажатии на кнопку с функцией-обработчиком события изменение состояния произойдёт сразу же, то есть ещё до выполнения задержки и выполнения кода до конца в функции-обработчике. Вот код компонента:

function Component() {
  let [number, setNumber] = useState(0);

  async function handleClick(){ 
    setNumber(number + 1);
    await delay(1000);
    console.log("hello");
  }

  return (<div style={{background: "gray", padding: "20px", border: "1px solid black"}}>
    <div>Number: {number}</div>
    <button onClick={handleClick}>Add</button> 
  </div>
); 
}

function delay(time){ //моя функция для задержки
  return new Promise(resolve => {
  setTimeout(function() {
    resolve(); 
  }, time)})
}