Why an async function, that is being awaited in the middle of the event listener, drops the state and phase of the Event?

Question

Why an async function, that is being awaited in the middle of the event listener, drops the state and the phase of the Event flow? Is it possible to keep it?

For example,

button.addEventListener("click", async (event) => {
  eventSnapshots.push({
    title: "Sync",
    object: extract(event)
  });

  syncFn(event);
  await asyncFn();
  syncFn(event);

  writeToElement(eventSnapshots, view);
});

The snapshot of the events' flow would be something like that:

Sync:
{
  "phase": 2,
  "currentTarget": {},
  "path": 5,
  ...
}
SyncFn:
{
  "phase": 2,
  "currentTarget": {},
  "path": 5,
  ...
}

//await AsyncFn

SyncFn:
{
  "phase": 0,
  "currentTarget": null,
  "path": 0,
  ...
}

(https://codesandbox.io/s/pensive-hill-nzxvnl?file=/src/index.js:514-745)