An event handler does an `await` and then reads a state variable AFTER the await. Between the await starting and resolving, the component re-rendered with new state. Which value does the post-await read see, and why?

function Save() { const [draft, setDraft] = useState(''); async function onClick() { await api.ping(); // takes 2s; user types meanwhile console.log(draft); // what is logged? } return <input value={draft} onChange={e => setDraft(e.target.value)} />; }