Getting TypeError: Cannot read properties of undefined (reading 'style') in ag-grid react,

I have develop an custom tooltip on header on ag-grid with react, getting the proper tooltip but, getting an error while clicking on the header.

//style contains more css property like height width etc

 const headerCustomIconTemplate = '<div class="ag-cell-label-container" role="presentation">' +
    `<div style="border: 1px solid #0GJH00; 
    text-align: center;
    ">T</div>`+
    '<span ref="eText" class="ag-header-cell-text"></span>' +
    '</div>'

const myTablesColumns = [
   
    {
        autoHeight: true,
        cellRendererFramework: customCellRenderer,
        field: "MyHeader",
        headerName: "MyHeader",
        headerTooltip: `My tooltip content`,
        sortable: true,
        filter: false,
        headerComponentParams: {template:headerCustomIconTemplate},
        
    }]

getting an error when clicking on the header section or on the custom icon component.

getting the desired result on hover but when i am clicking on the header getting the TypeError: Cannot read properties of undefined (reading 'style')

looking for solution how to fix header break on onClick or how to create custom tooltip on the the header