[SOLVED] Power BI Embedded - Filtering not working

I am trying to embed a Power BI report into my Laravel project using the Power BI REST API. The report is loading successfully. However, I am facing issues with applying filters to the report, specifically using a column named 'Partner Name' from the Excel dataset as a filter. I am also including my library's importing code.

<head>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/jquery/dist/jquery.js"></script>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/powerbi-client/dist/powerbi.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/powerbi-client/2.22.4/powerbi.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/powerbi-client/2.22.4/powerbi.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/powerbi-models@1.12.6/dist/models.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/powerbi-models@1.12.6/dist/models.min.js"></script>
</head>
<body>
<div id="embedContainer"></div>
<script>

    let loadedResolve, reportLoaded = new Promise((res, rej) => { loadedResolve = res; });
    let renderedResolve, reportRendered = new Promise((res, rej) => { renderedResolve = res; });
    const tokenType = '0';
    let report;
    const models = window['powerbi-client'].models;

    async function embedPowerBIReport() {
        let accessToken = 'eyKoxxxUxIx3RNLWzQ';
        let embedUrl = 'https://app.powerbi.com/reportEmbed?reportId=4ef9a267-68f5-49ff-b292-6a53195f67 a267asdflyZWN0LmFuYWx5c2lzLndpbmRvd3MubmV0IiwiZW1iZWRGZWF0dXJlcyI6eyJtb2Rlcm5FbWJlZCI6dHJ1ZSwidXNhZ2VNZXRyaWNzVk5leHQiOnRydWV9fQ%3d%3d';
        let embedReportId = '4ef9a267-68f5-49ff-b292-6a53195f671f';

        const config = {
            type: 'report',
            tokenType: tokenType == '0' ? models.TokenType.Aad : models.TokenType.Embed,
            accessToken: accessToken,
            embedUrl: embedUrl,
            id: embedReportId,
            permissions: models.Permissions.All,
            settings: {
                filterPaneEnabled: true,
                navContentPaneEnabled: true
            }
        };

        let embedContainer = $('#embedContainer')[0];

        report = powerbi.embed(embedContainer, config);

        report.off("loaded");

        report.on("loaded", function () {
            loadedResolve();
            report.off("loaded");
        });

        report.off("error");

        report.on("error", function (event) {
            console.log(event.detail);
        });

        report.off("rendered");

        report.on("rendered", function () {
            renderedResolve();
            report.off("rendered");
        });

       
    }

     embedPowerBIReport();

        const filter2 = {
            $schema: "http://powerbi.com/product/schema#basic",
            target: {
                table: "WBL-AllReviews-Export Less Records.csv",
                column: "Partner name"
            },
            operator: "In",
            values: ["WBL-Test"]
        };

    async function fn3() {
        setTimeout(() => {
            report.updateFilters(models.FiltersOperations.Add, [filter2])
        })
    }

    async function fn() {
        try {
            const res1 = await reportLoaded
            console.log('reportLoaded：' + res1)
            const res2 = await reportRendered
            console.log('reportRendered：' + res2)
            const res3 = await fn3()
            console.log('fn3()：' + res3)
        } catch (error) {
            console.log('Error: ' + error)
        }
    }
    fn()
    

</script>

The above code cause errors like,

reportLoaded：undefined powerbi:131 reportRendered：undefined powerbi:133 fn3()：undefined

I also tried a different approach using the following code snippet: This code doesn't cause any errors but the filtering part is not working.

<script>
        let loadedResolve, reportLoaded = new Promise((res, rej) => { loadedResolve = res; });
        let renderedResolve, reportRendered = new Promise((res, rej) => { renderedResolve = res; });
        let report;
        const models = window['powerbi-client'].models;

        function embedPowerBIReport() {
            const accessToken = 'eyJeXAiOxxxxxxxxxxxxxx';
            const embedUrl = 'https://app.powerbi.com/reportEmbed?reportId=4efxxxxxxx-xxxxxd%3dd%3d';
            const embedReportId = '4efxxxxxxxxxxxxxxxxxxxxxx';

            const tokenType = '0';

            const permissions = models.Permissions.All;

            const config = {
                type: 'report',
                tokenType: tokenType == '0' ? models.TokenType.Aad : models.TokenType.Embed,
                accessToken: accessToken,
                embedUrl: embedUrl,
                id: embedReportId,
                permissions: permissions,
                settings: {
                    panes: {
                        filters: {
                            visible: true
                        },
                        pageNavigation: {
                            visible: true
                        }
                    }
                }
            };

            const embedContainer = $('#embedContainer')[0];

             report = powerbi.embed(embedContainer, config);

            report.off("loaded");
            report.on("loaded", function () {
                loadedResolve();
                report.off("loaded");
            });

            report.off("error");
            report.on("error", function (event) {
                console.log(event.detail);
            });

            report.off("rendered");
            report.on("rendered", function () {
                renderedResolve();
                report.off("rendered");
            });
        }
        async function applyFilter() {
            alert("dsfa");
            const filter = {
                $schema: "http://powerbi.com/product/schema#basic",
                target: {
                    table: "WBL-AllReviews-Export Less Records.csv",
                    column: "Partner name"
                },
                operator: "In",
                values: ["WBL-Test"]
            };

            await reportLoaded;
            await reportRendered;

            report.updateFilters(models.FiltersOperations.Add, [filter]);
        }
        embedPowerBIReport();

        try {
            setTimeout(applyFilter);
            console.log("Report filter was added.");
        }
        catch (errors) {
            console.log(errors);
        }
</script>

Expected Behavior: I expect the Power BI report to filter data based on the 'Partner Name' column when the report is loaded.

Actual Behavior: The report loads successfully, but the filtering is not applied as expected.