Adding a placeholder to Bootstrap dropdown select

I’m using the bootstrap dropdown select to get a list of data to my form. The code is as below

jQuery(async function () {
  await LocationService.getOnlineLocations();
  let allLocations = LocationService.getAllLocationsAsArray();
  console.log(allLocations);
  $("#bookingFromInput").ready(function () {
    let text = "";
    allLocations.forEach((element) => {
      text += `<option value="${element.name}">${element.name}</option>`;
    });
    console.log(text);
    $("#bookingFromInput").html(text);
  });
});
<select class="form-select" id="bookingFromInput" name="from" aria-label="Default select example" autofocus>
  <option></option>
</select>

Image of how the dropdown is viewed

I’m trying to figure out a way to add the placeholder=”From” but the placeholder attribute doesn’t seem to work. Is there a fix for this?