await this.showPopup(”); don’t show the Popup

I wanted to show the CreateOrderPopup in Odoo15 BUT it’s not showing and there is no error message.
I created 2 logs : ffffffff and QQQQQ
the fffffffff is shown in the logs but the QQQQQ which is after calling ” await this.showPopup(‘CreateOrderPopup’); ” it’s not being shown.

I have this in the JS file :

odoo.define("point_of_sale.CreateOrderButton", function (require) {
    "use strict";

    const PosComponent = require("point_of_sale.PosComponent");
    const ProductScreen = require("point_of_sale.ProductScreen");
    const Registries = require("point_of_sale.Registries");
   
    class CreateOrderButton extends PosComponent {
        async onClick() {
            console.log("ffffffffffffffffffff");
           await this.showPopup('CreateOrderPopup');
            console.log('QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQ');
        };
        
    }
    CreateOrderButton.template = "CreateOrderButton";
    
    ProductScreen.addControlButton({
        
        component: CreateOrderButton,
        condition: function () {
            return (
                this.env.pos.config.iface_create_sale_order &&
                this.env.pos.get_order().get_client() &&
                this.env.pos.get_order().get_orderlines().length !== 0
                
            );
        },
    });

    Registries.Component.add(CreateOrderButton);
});

But the CreateOrderPopup is not showing when I click on the button. Also the QQQQ logs don’t get shown

For the CreateOrderPopUp i have :

odoo.define("point_of_sale.CreateOrderPopup", function (require) {
    "use strict";

    const AbstractAwaitablePopup = require("point_of_sale.AbstractAwaitablePopup");
    const Registries = require("point_of_sale.Registries");
    const framework = require("web.framework");

    class CreateOrderPopup extends AbstractAwaitablePopup {
        setup() {
            super.setup();
            this.createOrderClicked = false;
        }

        async createDraftSaleOrder() {
            await this._createSaleOrder("draft");
        }

        async createConfirmedSaleOrder() {
            await this._createSaleOrder("confirmed");
        }

        async createDeliveredSaleOrder() {
            await this._createSaleOrder("delivered");
        }

        async createInvoicedSaleOrder() {
            await this._createSaleOrder("invoiced");
        }

        async _createSaleOrder(order_state) {
            var current_order = this.env.pos.get_order();

            framework.blockUI();

            await this.rpc({
                model: "sale.order",
                method: "create_order_from_pos",
                args: [current_order.export_as_JSON(), order_state],
            })
                .catch(function (error) {
                    throw error;
                })
                .finally(function () {
                    framework.unblockUI();
                });

            // Delete current order
            this.env.pos.removeOrder(current_order);
            this.env.pos.add_new_order();

            // Close popup
            return await super.confirm();
        }
    }

    CreateOrderPopup.template = "CreateOrderPopup";
    Registries.Component.add(CreateOrderPopup);

    return CreateOrderPopup;
});

both templates are created and they are all called like this in the manifest file :

  "assets": {
        "point_of_sale.assets": [
            "pos_order_to_sale_order/static/src/css/pos.css",
            "pos_order_to_sale_order/static/src/js/CreateOrderPopup.js",
            "pos_order_to_sale_order/static/src/js/CreateOrderButton.js",
        ],
        'web.assets_qweb': [
            "pos_order_to_sale_order/static/src/xml/CreateOrderPopup.xml",
            "pos_order_to_sale_order/static/src/xml/CreateOrderButton.xml",

        ],

Why does the PopUp stops the QQQQ log from showing in the logs and itself in the POS