EmbededPowerBI react component is not filtering report data

Question

I am using PowerBIEmbed component to display powerBI report, Power BI report is using telemetry query to filter data. telemetry has columns like

name CustomColumnJson { Id, Event }

I want to apply filter over Id column, then I am applying filter like , but filter is not working.

       <PowerBIEmbed
            embedConfig={{
                type: 'report', 
                id: '*********************',  //client_id
                embedUrl: "", //embed url, if u dont knw refer powerbi api docs
                accessToken: this.state.accessToken,
                tokenType: models.TokenType.Aad,
filters: [{
                $schema: "http://powerbi.com/product/schema#basic",
                target: {
                table: "Event",
                column: "CustomColumnJson.Id"
                },
                operator: "In",
                values: "XYZ"
            }],
                settings: {
                    panes: {
                        filters: {
                            expanded: false,
                            visible: true
                        }
                    },
                }
            }} eventHandlers={
                new Map([
                    ['loaded', function () { console.log('Report loaded'); }],
                    ['rendered', function () { console.log('Report rendered'); }],
                    ['error', function (event) { console.log(event.detail); }]
                ])
            }
            cssClassName={"container"}
            getEmbeddedComponent={(embeddedReport) => {
                window.report = embeddedReport;
            }}
        />

Answer 1

Values in the filters should be of Array of (strings or boolean or numbers). Try this code and LMK if this works.

filters: [{
                $schema: "http://powerbi.com/product/schema#basic",
                target: {
                table: "Event",
                column: "CustomColumnJson.Id"
                },
                operator: "In",
                values: ["XYZ"]
            }],

Sample :

const filter = {
$schema: "http://powerbi.com/product/schema#basic",
target: {
    table: "Geo",
    column: "Region"
},
operator: "In",
values: ["West", "Central"]}; 
// Add the filter to the report's filters.
try {
await report.updateFilters(models.FiltersOperations.Add, [filter]);
console.log("Report filter was added.");}
catch (errors) {
console.log(errors);}

Here is my table and column name.

Filter section before applying filter

Filter section after applying filter

References: https://learn.microsoft.com/javascript/api/overview/powerbi/control-report-filters