custom interactive filter - <select> dropdown renders as visually empty

[VarunSareen9587]

We are trying to create a custom interactive filter on a dashboard in ServiceNow, which filters sn_customerservice_case records by the Reporting Unit (a display value coming from the dot-walked field account.u_reporting_unit_text).
We built a Jelly-based dynamic content block that queries unique account.u_reporting_unit_text values using GlideRecord on the sn_customerservice_case table.
Switching from a dynamic content block to a UI Macro invoked via <g:macro_invoke> did not resolve the issue.

• The <select> dropdown renders as visually empty when I dynamically generate <option> elements using <j:forEach>.

• Even though 30+ entries are pushed into unitArray, they do not appear visibly in the dropdown.

• I' ve escaped all special characters (&, <, >, ") to ensure valid XML and Jelly-safe formatting.

• Jelly and XML validations pass without syntax errors, but the dropdown still renders blank.
  I can see records in my syslogs but nothing in the browser elements. 
  
  Below is my current UI macro script.
  

<j:jelly xmlns:j="jelly:core" xmlns:g="glide">
    <g:evaluate var="jvar_units" object="true" jelly="true">
        var unitArray = [];
        var seen = {};
        var logPrefix = "[CustomIFReportingMacro]";
        var gr = new GlideRecord('sn_customerservice_case');
        gr.addNotNullQuery('account.u_reporting_unit_text');
        gr.query();

        var count = 0;
        while (gr.next()) {
        var val = gr.getDisplayValue('account.u_reporting_unit_text');
        if (val &amp;&amp; !seen[val]) {
        seen[val] = true;
        unitArray.push([val, val]);
        gs.log(logPrefix + " Added: " + val);
        count++;
        }
        }

        gs.log(logPrefix + " Total unique reporting units: " + count);

        unitArray.sort();
        unitArray;
    </g:evaluate>

    <div>
        <label><b>Filter by Reporting Unit:</b></label><br />
        <select id="reporting_unit_filter" onchange="filterReportingUnit()">
            <option value="">-- All Reporting Units --</option>
            <j:forEach var="unit" items="${jvar_units}">
                <option value="${unit[0]}">${unit[1]}</option>
            </j:forEach>
        </select>
    </div>

    <script>
        <![CDATA[
        var dashboardMessageHandler = new DashboardMessageHandler("reporting_unit_filter");

        function filterReportingUnit() {
            var selected = $j('#reporting_unit_filter').val();
            console.log("[CustomIFReporting] Selected: " + selected);

            if (selected) {
                var filter = 'account.u_reporting_unit_text=' + selected;
                SNC.canvas.interactiveFilters.setDefaultValue({
                    id: dashboardMessageHandler._unique_id,
                    filters: [{
                        table: 'sn_customerservice_case',
                        filter: filter
                    }]
                }, false);
                dashboardMessageHandler.publishFilter('sn_customerservice_case', filter);
            } else {
                console.log("[CustomIFReporting] Clearing filter");
                SNC.canvas.interactiveFilters.removeDefaultValue(dashboardMessageHandler._unique_id, false);
                dashboardMessageHandler.removeFilter();
            }
        }
        ]]>
    </script>
</j:jelly>

Attached is the screenshot from Browser Elements DOM. 

Below is how the Filter looks like with Empty values;

Can someone please advice what I doing wrong in my UI macro script??