【javascript】fetchで複数のページにアクセスし、アクセスした各ページからquerySelectorで要素を取得、その取得した要素を配列にしたい

Question

今ご覧いただいているteratailのページを例にお伝えさせていただきます。

ページ下部(「回答する」ボタンの下)の「関連した質問」の各質問のリンク先にfetchでアクセス
質問ぺージの要素(ページのタイトル)をquerySelectorで取得
取得した要素を配列にしたい

記述したコードは以下の通りです。
配列に格納することができず、ご教示いただきたいです。

let questionPageURL = document.querySelectorAll(".question_relatedQuestions__3rsYL .anchor_base__2hAGd"); // 「関連した質問」の各aタグを取得
let questionPageURLarray = []; // 取得したaタグのhrefを格納する用の空配列を作成
let questionPageHTMLtitleArray = []; // この後fetchでアクセスするページから取得する要素を格納する空配列を作成
for (let i = 0; i < questionPageURL.length; i++) {
  questionPageURLarray[i] = questionPageURL[i].getAttribute("href"); // 取得したaタグからhrefを取得し、ループでquestionPageURLの数だけそれを配列に格納
  fetch(questionPageURLarray[i]) // fetchで「関連した質問」の各リンク先にアクセス
    .then((response) => response.text())
    .then((text) => {
      let DOMtext = new DOMParser();
      let questionPageHTML = DOMtext.parseFromString(text, "text/html");
      let questionPageHTMLtitle = questionPageHTML.querySelector(".questionHeader_title__pUEK0"); // 「関連した質問」のリンク先ページのタイトルを取得
      questionPageHTMLtitleArray[i] = questionPageHTMLtitle; // 取得したリンク先のタイトルを配列に格納
    });
}
console.log(questionPageHTMLtitleArray);
// 結果  []

// 期待する結果 [h2.title_base__VKKOr.questionHeader_title__pUEK0, h2.title_base__VKKOr.questionHeader_title__pUEK0, h2.title_base__VKKOr.questionHeader_title__pUEK0, h2.title_base__VKKOr.questionHeader_title__pUEK0, h2.title_base__VKKOr.questionHeader_title__pUEK0, h2.title_base__VKKOr.questionHeader_title__pUEK0, h2.title_base__VKKOr.questionHeader_title__pUEK0, h2.title_base__VKKOr.questionHeader_title__pUEK0]