ドラック&ドロップされたファイルをFileSystemFileHandle型にして、配列で保持したい

実現したいこと

Javascriptでドラックアンドドロップでファイルとフォルダーを操作するアプリを目指して実装しています。

ドロップされたファイルをFile System APIを使い後々保存処理につなげたいです。
※今回は保存処理は問題ではないです。
保存の前処理としてドロップされたファイルのFileSystemFileHandle型を配列で保持しようとしています。

発生している問題・分からないこと

複数ファイルがドロップされたら、event.dataTransfer.itemsでファイル情報を得るためのループを回します。
FileSystemFileHandle型へ変換する

javascript

1const handle = await promiseHandler.getAsFileSystemHandle()

の実行以降(arrayAfter)と以前(arrayBefore)ではpushの挙動が微妙に違うのが何故だかわからないです。
arrayBefore　→ 想定通り値が入っている。
handles → やりたいこと、配列が入っているようで[0]で参照できないので実態は入っていない。コンソールだと▼で展開すると値が入っているように見える。
arrayAfter → handlesと同じで配列の中身がない、arrayBeforeと同じになってもいいと思うがならない

不明点
コンソールだと▼で展開すると値が入っていて実際は参照できない状態がよくわからないです。全部解決までいかなくてもそれだけでも教えていただけると助かります。　→ご回答いただきました。

やりたいこと

• getAsFileSystemHandle()実行後もちゃんとpushで値が入ってくれるようにしたいです。

下記のコードと同じですが動作サンプルです。

該当のソースコード

javascript

1document.addEventListener('DOMContentLoaded', () => {2 const dropArea = document.getElementById('drop-area')3 4 dropArea.addEventListener('dragover', (event) => {5 event.preventDefault();6 });7 8 dropArea.addEventListener('drop', async (event) => {9 const handles = []10 const arrayBefore = []11 const arrayAfter = []12 13 event.preventDefault();14 const promiseHandlers = [...event.dataTransfer.items]15 promiseHandlers.forEach(async (promiseHandler) => {16//前でpushする17 for (let i = 0; i < 2; i++) {18 arrayBefore.push(i);19 }20 const handle = await promiseHandler.getAsFileSystemHandle()21 handles.push(handle)22//後でpushする23 for (let i = 0; i < 2; i++) {24 arrayAfter.push(i);25 }26 })27 console.log('arrayBefore',arrayBefore);28 console.log('arrayBefore[0]',arrayBefore[0]);// [0]29 console.log('handles',handles);30 console.log('handles[0]',handles[0]);// undefined31 console.log('arrayAfter',arrayAfter);32 console.log('arrayAfter[0]',arrayAfter[0]); // undefined33 });34});35

試したこと・調べたこと

上記の詳細・結果

promiseHandlers.forEachをforEachではなく、mapで回して返すようにしたらうまくいきましたが、
だんだん他の処理も入れたり複雑になってしまったのでpushでもできるようになって欲しいです。

補足

MDNのgetAsFileSystemHandle例のコード

javascript

1// すべてのアイテムを処理する2 for (const item of e.dataTransfer.items) {

上記だと複数ファイルのとき一つのファイルしか取れないので配列に変換してループしています。