t-foreach loop in POS template screen is not working

I'm working on Odoo 16 and tried to create a custom screen in POS.

Is there any particular reason why the following template is not working in my custom POS screen?

<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
    <t t-name="ProductTotalSalesScreen" owl="1">
        <t t-set="data_sales" t-value="sales_data"/>
        <div class="top-content">
            <div class="button back" t-on-click="back">
                Back
            </div>
        </div>
        <t t-foreach="[1, 2, 3]" t-as="i">
            <p><t t-esc="i"/></p>
        </t>
    </t>
</templates>

What causes the problem is the t-foreach section. When I remove it, everything works as expected and my screen appears with the back button. As soon as I implement a t-foreach section, then an 'undefined' error appears in my browser console, when I try to display my custom screen.

Generally, I can't use t-foreach in my POS templates and I always get the 'undefined' error.

Does anyone know why? Any hint would be helpful.

Try this if it works for you

<t t-foreach="[1, 2, 3]" t-as="i" t-key="i">
   <p><t t-esc="i"/></p>
</t>