How to add a click event listener for list in lwc

Question

I have a child component which will show list of search result. For some reason onclick event is not firing which is sometimes.

So as an alternative i am trying to add click event to search list.

Here is the component

<ul class="slds-listbox slds-listbox_vertical" role="presentation">
      <template for:each={records} for:item="record">
         <li key={record.Id}  data-id={record.Id} role="presentation" data-name={record.Name} data-icon={record.icon} data-class="myList">
              <span class="slds-lookup__item-action slds-lookup__item-action--label" role="option">
                    <lightning-icon class="slds-icon slds-icon--small slds-icon-text-default" icon-name={record.icon} alternative-text={objName} size="small"></lightning-icon>
                          <span class="slds-truncate" style="font-size:13px;">{record.Name}</span>
              </span>
         </li>
      </template>
</ul>

JS

 connectedCallback(){
    //this.template.querySelector('li').addEventListener('click',this.handleSelectTag.bind(this));
    // this.template.querySelector('li').
    
    // this.template.querySelector('myList').addEventListener('click',this.handleSelectTag.bind(this));
    // window.addEventListener('click',this.handleSelectTag.bind(this));
    let e = this.template.querySelectorAll('li[data-class="myList"]');
    console.log("setupAssisstants---<", e[0]);                //This is getting undefined
    e[0].addEventListener("click", this.handleSelectTag)
}

I am getting the querselectorall result as null. Can anyone please help to point out what am i doing it wrong