useStateで配列にオブジェクトを追加したいです。

Question

前提・実現したいこと

デモを用意しました。
CodeSandBox

2つのプロパティを持ったオブジェクトを格納した配列に、forEachで各オブジェクトに処理を施し、処理を施したオブジェクトを配列のstateに格納したいです。

デモで言うと、下記のような表示を目指しています。

HOGE

hogehoge
FUGA
fugafuga

新しい配列を生成する場合はmapを使う方が相応しいと思いますが、実際のデータの取得元がFirestoreからであり、Firestoreから取得したデータはmapメソッドが使えないようなので、forEachで実装したいです。

発生している問題・試したこと

処理を施したオブジェクトは配列に追加されず上書きをします。

【React】 useStateで配列を保存するときの注意点 - Qiita
上記ページを参考にして、setState([...配列のstate, 処理を施したオブジェクト])と書いてみましたが、配列のstateの中身は最後に処理を施したオブジェクト1つのみでした。

現状のデモはhogeオブジェクトがfugaオブジェクトに上書きされ、下記のようにfugaオブジェクトのみが表示されています。

FUGA

fugafuga

該当のソースコード

const data1 = {
  title: "hoge",
  text: "hogehoge"
};
const data2 = {
  title: "fuga",
  text: "fugafuga"
};
const listData = [data1, data2];

export default function App() {
  const [array, setArray] = useState([]);
  useEffect(() => {
    listData.forEach((data) => {
      const upperTitle = data.title.toUpperCase();
      const newData = { title: upperTitle, text: data.text };
      setArray([...array, newData]);
    });
  }, []);

  const list = array.map((item, index) => (
    <div key={index}>
      <p>{item.title}</p>
      <p>{item.text}</p>
    </div>
  ));

  return <>{list}</>;
}

Answer 1

setArrayは、useEffectが完了してからStateを書き換えるので、ループ内ではarrayの中身は常に[]になっています。

下のように関数を渡すことで更新前の状態からの更新にすることができます

setArray((prevArray)=>[...prevArray, newData]);