用对象数组填充选择

Question

我的firebase有一个变量的结果：

[
    {
        "value": "CHProNd9BGYznrEr0u43",
        "label": "Jean"
    },
    {
        "value": "Huo0mofwJGKx2uEd9467",
        "label": "aaa"
    },
    {
        "value": "IO5w6WstNngCNyKRneYg",
        "label": "African"
    }
]

我想通过firebase的呼叫来获得此结果：

export async function getCoupeurs() {

      let getCoupeurFromFirebase = [];
          const coupeursRef = collection(db, "coupeurs");
          getDocs(coupeursRef).then(snapshot => {
          snapshot.forEach(doc => {
              getCoupeurFromFirebase.push({
              value: doc.id,
              label: doc.data().nom,
              });
          });
        });
    
        return getCoupeurFromFirebase;
    }

我想填写此选择输入：

<select>
{ 
  coupeurs.map(coupeur => (
    <option key={coupeur.value} value={coupeur.value}>{coupeur.label}</option>
  ))
}
</select>

但是我在屏幕上什么也没有错误，没有错误，您能帮我通过最好的方式？ [更新] codepen.io上的代码，我认为问题是从数据库中呼吁数据，有一种方法可以告诉我我想等待结果，然后再将数据发送到我的组件？

https://codepen.io/lbain/lbain/pen/pen/pen/enpzbz

<select>
          {
            coupeurs.map(coupeur => (
              <option>{coupeur.label}</option>
            ))
          }
</select>

谢谢。