im trying to get the document ID values from my firestore and insert them to my dropdown menu,however when i try to do that the dropdown menu is empty,even tho when i console.log the array where i stored the values,it shows all the values correctly.here is my code.

db.collection("Points").onSnapshot((querySnapshot) => {
    arr = [];
    querySnapshot.forEach((doc) => {
        arr.push(doc.id);
    });
    var select = document.getElementById("point");
    for (var i = 0; i < arr.length; i++) {
        var option = document.createElement("OPTION"),
            txt = document.createTextNode(arr[i]);
        option.appendChild(txt);
        option.setAttribute("value", arr[i]);
        select.insertBefore(option, select.lastChild);
        //console.log(points);
        console.log(arr[i]);
    }

});

and the html:

<select name="point" id="point" class="browser-default selectit">
          <option value="">Selectionner un point </option>
      </select>

and this is what i see in my console for the when i check the console.log of my array console view

any help would be appreciated,thanks