I have this result from my firebase in a variable :

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

I get this result with this call to 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;
    }

and i want to fill this select input :

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

but i have nothing on my screen and no error, can you help me to do this by the best way ? [updated] The code on codepen.io , that work so i think the problem is the call for data from database there is a way to tell that i want to wait the result before send the data to my component ?

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

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

thanks.