Hi i use odoo 17 and i need to add button to my Navbar header in pos module inside session so after that i will when click on it it will show report i made button and it show correct but when i click on it it give strange message i can't find solution to it over internet 

my module just contain xml and js file 
//this is js file


/** @odoo-module */
import {registry} from "@web/core/registry";
import {Component} from "@odoo/owl";

import {usePos} from "@point_of_sale/app/store/pos_hook";
import {ProductScreen} from "@point_of_sale/app/screens/product_screen/product_screen";

export class CustomButton extends Component{
    static template = "CustomButton";
    setup() {
        super.setup();
        this.pos = usePos();
    }

    onClick(){
        console.log("hello header");
    }
}

and this is xml file 

<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve" owl="2">
    <t t-name="CustomButton">
        <span class="control-button  bg-info btn btn-light rounded-0 fw-bolder " t-on-click="onClick">
            <span>My Stock</span>
        </span>
    </t>

    <t t-name="ButtonHeader" t-inherit="point_of_sale.Navbar" t-inherit-mode="extension">
        <xpath expr="//div[hasclass('pos-rightheader')]" position="before">
            <t t-call="CustomButton"/>
        </xpath>
    </t>

</templates>

and this is my manifest
{
    'name': 'stock_balance_pos_session',
    'version': '1.0',
    'sequence': '-1',
    'category': 'Point of Sale',
    'author': 'tarek nady',
    'license': 'AGPL-3',
    'depends': ['point_of_sale','web'],
    'assets': {
        'point_of_sale._assets_pos': [
            'sfa_stock_balance/static/src/scss/pos_custom_button.scss',
            'sfa_stock_balance/static/src/xml/pos_custom_button.xml',
            'sfa_stock_balance/static/src/js/pos_custom_button.js',
        ],
    },
    'installable': True,
    'auto_install': False,
}

please help me to get solution for this problem
and this text for output error
point_of_sale.assets_prod.min.js:1566 Uncaught OwlError: Invalid handler (expected a function, received: 'undefined')

    at Object.mainEventHandler (point_of_sale.assets_prod.min.js:1566:100)

    at HTMLSpanElement.listener (point_of_sale.assets_prod.min.js:742:15)