[SalesForce] Custom LWC error Uncaught TypeError: Cannot read property ‘apply’ of undefined

I have created a Custom LWC Datatable following Creating Custom Data Types in Salesforce Documentation.

My Custom LWC cell component as below,

<template>
    <div class="slds-grid slds-cell-wrap slds-align_absolute-center">
        <div class="slds-col">
            {value}
            <lightning-button label="click" ></lightning-button>
            <lightning-button label="click" onclick={handlePayNow} ></lightning-button>
            <a href="#" onclick={handlePayNow}><b>Pay Now</b></a> | <a href="#" onclick={handleDownload}>Download</a>
        </div>
        
    </div>
</template>

and it's Javascript Controller as below,

import { LightningElement, track, api } from 'lwc';

export default class invoiceCustomAction extends LightningElement {

    handlePayNow(event){

        console.log('test A');
        //console.log('value '+ this.value);

    }

    handleDownload(event){
        console.log('test B');
        //console.log('download '+ this.value);

    }
}

My Custom Data table component as below:

Markup

JS Controller

import LightningDatatable from 'lightning/datatable';
import invoiceCustomAction from './invoiceCustomAction.html';

export default class test_InvoicesCustomDatatable extends LightningDatatable {
   static customTypes = {
       customInvoiceCell: {
           template: invoiceCustomAction,
           standardCellLayout: true
           // Provide template data here if needed
       }
      //more custom types here
   };
}

Consumer code:

component markup:

<template>
    <div class = "slds-size_1-of-1 slds-box slds-var-m-around_small">
        <lightning-layout multiple-rows="true">
            <lightning-layout-item size = "12">
                <div  class="slds-size_1-of-1">
                        <!--<lightning-datatable-->
                            <c-test-invoices-custom-datatable
                                key-field="index"
                                data={currentPageData}
                                columns={columns} 
                                onsort={updateColumnSorting}
                                sorted-by={sortedBy}
                                sorted-direction={sortDirection}
                                is-loading={isLoading}
                                onrowselection={onRowSelection}
                                selected-rows={currentSelection}
                                >
                        <!--</lightning-datatable>-->
                        </c-test-invoices-custom-datatable>
                </div>
            </lightning-layout-item>
        </lightning-layout>
    </div>
</template>

JS Controller

import { LightningElement,track,api } from 'lwc';
import FORM_FACTOR from '@salesforce/client/formFactor';
import getInvoices from '@salesforce/apex/Test_InvoiceListController.getInvoices';

const columns = [
    { label: 'Date issued', fieldName: 'issueDate', type: 'date', sortable : true },
    { label: 'Account', fieldName: 'accountNo' , sortable : true, type: 'text'},
    { label: 'Invoice #', fieldName: 'invoiceNo', sortable : true, type: 'text'},
    { label: 'Date due by', fieldName: 'dueDate', type: 'date', sortable : true },
    { label: 'Amount', fieldName: 'amount', type: 'currency', sortable : true },
    { label: 'Status', fieldName: 'status', sortable : true, type: 'text'},
    { label: 'Action', type: 'customInvoiceCell', fieldName: 'index'}
    ];

export default class Test_InvoiceList_Outstanding extends LightningElement {

    @track idw = {listIW:[]};                                   // Invoices Display Wrapper Object
    @track page = 1;                                            // Current Page number
    @api perpage = 10;                                          // Records per Page
    @track pages = [];                                          // Page numbers array
    set_size = 3;                                               // Number of Page number buttons
    @track numberOfPages = 1;                                   // Number of pages to show
    @track sortedBy = 'accountNo';                              // Sort field
    @track sortDirection = 'asc';                               // Sort direction
    @track isLoading = true;                                    // Loading UI
    @track searchText = '';                                     // Search text
    @track filteredResults = []                                 // Filtered Invoice wrappers displayed on Datatable,etc.
    @track pageStartIdx = 0;                                    // Page start record index
    @track pageEndIdx = 0;                                      // Page end record index
    @track searchTextPlaceHolder = 'Search by keyword, name';   // Search Text Place holder
    @track selectedRows = [];                                    // Current page's row selection
    @track allSelectedRows = new Map();                          // PageNo => Selected row Ids[] map to keep persistent selection in paginated data table   
    mapPage2SelIdx = new Map()                                    
    navRefresh = false;
    
    renderedCallback(){
        this.columns = columns;
        this.renderButtons();   
    }
    
    renderButtons = ()=>{
        this.template.querySelectorAll('button').forEach((but)=>{
            but.style.backgroundColor = this.page===parseInt(but.dataset.id,10)?'blue':'white';
         });
    }
    
    get pagesList(){
        let mid = Math.floor(this.set_size/2) + 1 ;
        if(this.page > mid){
            if (this.page==(this.pages.length))       // Last page
                return this.pages.slice(this.page-mid-1, this.page+mid-1);
            else
                return this.pages.slice(this.page-mid, this.page+mid-1);
        } 
        return this.pages.slice(0,this.set_size);
     }
    
     async connectedCallback(){
        this.isLoading = true;

        this.idw = await getInvoices();
        if (this.idw!=null && this.idw.listIW!=null)
            this.filteredResults = this.idw.listIW.slice(0);
        this.isLoading = false;

        this.setPages(this.filteredResults);
        
     }
    
    pageData = ()=>{
        let page = this.page;
        let perpage = this.perpage;
        let startIndex = (page*perpage) - perpage;
        let endIndex = (page*perpage);
        
        this.pageStartIdx = startIndex + 1;
        this.pageEndIdx = (endIndex > this.filteredResults.length) ? this.filteredResults.length : endIndex;

        return this.filteredResults.slice(startIndex,endIndex);
     }

    setPages = (data)=>{
        this.page = 1;
        this.pages = [];
        this.numberOfPages = Math.ceil(data.length / this.perpage);
        for (let index = 1; index <= this.numberOfPages; index++) {
            this.pages.push(index);
        }
     }  
    
    get hasPrev(){
        return this.page > 1;
    }
    
    get hasNext(){
        return this.page < this.pages.length
    }

    onNext = ()=>{
        this.navRefresh = true;
        ++this.page;
    }

    onPrev = ()=>{
        this.navRefresh = true;
        --this.page;
    }

    onPageClick = (e)=>{
        this.navRefresh = true;
        this.page = parseInt(e.target.dataset.id,10);
    }

    get currentPageData(){
        this.selectedRows = this.selectedRows.splice(0);
        return this.pageData();
    }

    get currentSelection(){
        let selectedRecs = this.mapPage2SelIdx.get(this.page);
        if (!Array.isArray(selectedRecs))
            selectedRecs = [];
        return selectedRecs;
    }


    updateColumnSorting(event) {       
        this.sortedBy = event.detail.fieldName;
        this.sortDirection = event.detail.sortDirection;

        this.sortData(this.sortedBy);
    }

    sortData(sortedBy){
        var data = this.filteredResults;
        var reverse = this.sortDirection !== 'asc';
        data.sort(this.sortBy(sortedBy, reverse));
        this.filteredResults = data;
    }

    sortBy(field, reverse, primer) {
        var key = primer ?
            function(x) {return primer(x[field])} :
            function(x) {return x[field]};
        reverse = !reverse ? 1 : -1;
        return function (a, b) {
            return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
        }
    }

    handleFilterChange(event) {
      }
      
      onRowSelection(event){
      }
}

On the custom datatable component cell, when you click any button/url except the one having event handler, it's throwing the below error.

Any help to understand what it means? what could be missing in the custom LWC component?
Thanks!