Rendering an indexed list with clickable rows

// HTML //
<template
                for:each={banksList}
                for:item="obj"
                for:index="index">
                <button
                    key={obj}
                    data-index={index}
                    onclick={handleBankSelection}
                    class="shaded-button slds-button slds-button_stretch">
                    <div
                        style="
                            align-items: center;
                            display: flex;
                            flex-grow: 1;
                        ">
                        <span
                            class="bodyTextFontClasses"
                            style="
                                color: #353a40;
                                font-size: 16px;
                                line-height: 24px;
                            "
                            >{obj.code} - {obj.nameSummarized}</span
                        >
                    </div>
                    <div
                        class="slds-float_right"
                        style="
                            align-items: center;
                            display: flex;
                            padding-right: 8px;
                        ">
                        <lightning-icon
                            size="x-small"
                            class="card-icon slds-float_left"
                            icon-name="utility:chevronright"></lightning-icon>
                    </div>
                </button>
                <hr
                    key={obj}
                    class="linha-cinza" />
</template>

//JS //
    handleBankSelection(event) {
        const itemIndex = event.currentTarget.dataset.index;
        const rowData = this.banksList[itemIndex];

        console.log("rowData: ", rowData);
    }