Create a scrolling list in html format with app script

Question

I'm trying to create an lselect option by retrieving the data from my sheet but after many attempts I get nothing at all. My getPropertiesNamesList function retrieves the data but I can't display them in the select

code.gs

const getPropertiesNamesList = () => {
  try {
    const propertiesSheet = getSs(jamPropertyManagementSettingsSpreadsheetId).getSheetByName('Properties');
    const propertiesNamesList = getSheetHeaders(propertiesSheet);
    return propertiesNamesList;
  } catch (error) {
    Logger.log(`getPropertiesNamesListError: ${error.message}`);
    return `getPropertiesNamesListError: ${error.message}`;
  };
};

Script.html

$(function() {
  google.script.run.withSuccessHandler(showProperty)
      .getPropertiesNamesList();
});

function showProperty(property) {
  var list = $('#propertyNameList');
  list.empty();
  for (var i = 0; i < property.length; i++) {
    list.append('<option>' + property[i] + '</option>');
  }
}

index.html

 <label for="property" class="form-label">Property</label>
     <select class="selectpicker form-control"
       data-live-search="true" title="Choose a Property" name="propertyNameList"   id="propertyNameList" required>
                                                                    
  </select>