循環遍歷 JSON 對象並將它們轉換為 React 組件

我有一個JSON文件，裡面有 3 個不同的對象（card1、card2 和 card3）。我想在 中遍歷這些對象JavaScript，將它們轉換為arrayof 對象，然後在我的 React 代碼中，我試圖根據 JSON 文件中有多少將它們轉換為組件。

到目前為止我所擁有的：

import Card from "./card-elements/Card";
import json from "./data.json";

const list = [];
for (const key in json) {
    if (json.hasOwnProperty(key)) {
        list.push(key);
    }
}

function App() {
    return (
        <div className="card-area">
            {list.map(i => {
                return <Card title={i.title}
                             description={i.description}
                             borderColor={"red"}/>
            })}
        </div>
    );
}

export default App;

數據.json：

{
    "card1": {
      "title": "Card One",
      "description": "This is card one's description. Straight from JSON file!"
    },
    "card2": {
      "title": "Card Two",
      "description": "Directly from the JSON file, this is card two's description"
    },
    "card3": {
      "title": "Card Three",
      "description": "And finally, this is the last cards description!"
    }
}

當前輸出：我的 React 沒有出現錯誤，它只顯示一個組件，並且沒有顯示“標題”和“描述”

任何幫助將不勝感激，謝謝！