datalist element is not populating dynamic array list in lwc

I need to show the list that are retrieved from a thirdparty system (callout) using datalist options. I tried the logic in the this link https://blog.enree.co/2019/04/salesforce-lwc-autocomplete-magic-with-html-datalist.html. However, my dynamic array list is never displayed though I see the responses from Apex. I see the input and datalist are linked together using their ids.

html:

    <input id="addressInputbox"
            data-id="address-search"
            type="text"
            oninput={onChange}
            list="countries"
            class="slds-input"/>
            <datalist id="countries" >
                <template for:each={showaddressList} for:item='item'>
                    <option key={item.Rank} value={item.Address}>{item.Address}</option>
                </template>
            </datalist>

*.js:

               renderedCallback() {
    if (this.initialized) {
        return;
    }
    this.initialized = true;
   this.template.querySelector("input").setAttribute('list', listId);
    let listattr1 = this.template.querySelector('input').getAttribute('list');
    }



   onChange(event){
    this.value = event.target.value;
    this.showaddressList = '';
    if(this.value && this.value.length >= 4){
        console.log(this.value);
        fetchAddressList({addressText : this.value.trim()})
        .then(result => {
            //console.log('result-->'+result[0].address);
            if(result){
                result.forEach(element => {
                    let temp = {};
                    temp.Address = element.address;
                    temp.Rank = element.rank;
                    temp.Id = element.id;
                    console.log('element-->'+element.address+' '+element.id);
                    this.addressList[parseInt(element.rank)] = temp;
                    console.log('addressList-->'+this.addressList);
                });this.showaddressList = this.addressList;console.log('showaddressList-->'+this.showaddressList);
            }
            
        });