javascript - イベントリスナーの途中で待機している非同期関数が、イベントの状態とフェーズをドロップするのはなぜですか?

Question

イベント リスナーの途中で待機している非同期関数が、イベント フローの状態とフェーズをドロップするのはなぜですか? それを維持することは可能ですか？

例えば、

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

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

  writeToElement(eventSnapshots, view);
});

イベントの流れのスナップショットは次のようになります。

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 )