Power BI Custom Visual - not filtering other visuals

Question

I am am building a custom Power BI Visual that is a date range selector. I am implementing a React component which listens for the change in the range selector and passes it to the visual to filter the data in Power BI.

I've following the documentation for using filters with Power BI visuals but still no luck. I can see the the React component passed the newly selected start and end date values to my handleSliderChange function but it still doesn't filter the data in Power BI.

I've tried using both the Basic and Advance filter techniques and also formatting the Power BI column to match ISO 8601 standard.

Any idea what it could be?

import "core-js/stable";
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import powerbi from 'powerbi-visuals-api';
import * as models from 'powerbi-models';
import {
  IFilter,
  IBasicFilter,
  IFilterColumnTarget
} from 'powerbi-models';
import FilterAction = powerbi.FilterAction;

import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import DataView = powerbi.DataView;
import DoubleSlider from './DoubleSlider';

export class Visual implements powerbi.extensibility.visual.IVisual {
  private target: HTMLElement;
  private reactRoot: JSX.Element;
  private dataView: DataView;
  private visualHost: powerbi.extensibility.visual.IVisualHost;

  constructor(options: powerbi.extensibility.visual.VisualConstructorOptions) {
    console.log('Visual constructor called with options:', options);

    this.target = options.element;
    this.visualHost = options.host;
    this.renderComponent(); // Initial render without data
  }

  public update(options: VisualUpdateOptions) {
    console.log('Visual update called with options:', options);

    if (options.dataViews && options.dataViews[0]) {
      this.dataView = options.dataViews[0];
      const dateValuesArray = this.dataView.categorical.categories[0].values as Date[];
      //console.log('dateValuesArray:', dateValuesArray);

      const minDate = new Date(Math.min(...dateValuesArray.map(date => date.getTime()))).getTime();
      const maxDate = new Date(Math.max(...dateValuesArray.map(date => date.getTime()))).getTime();

      console.log('Calculated minDate:', minDate);
      console.log('Calculated maxDate:', maxDate);

      this.renderComponent(minDate, maxDate);
    } else {
      this.clear();
    }
  }

  private renderComponent(minDate ? : number, maxDate ? : number) {

    console.log('renderComponent called with minDate and maxDate:', minDate, maxDate);


    this.reactRoot = React.createElement(DoubleSlider, {
      minDate: minDate,
      maxDate: maxDate,
      onChange: this.handleSliderChange
    });
    ReactDOM.render(this.reactRoot, this.target);
  }

  private formatDateToPowerBIFormat(date: Date): string {
    const pad = (num: number): string => (num < 10 ? '0' : '') + num;

    const month = pad(date.getMonth() + 1); // Months are 0-based
    const day = pad(date.getDate());
    const year = date.getFullYear();

    const hours = date.getHours();
    const minutes = pad(date.getMinutes());
    const seconds = pad(date.getSeconds());
    const ampm = hours < 12 ? 'AM' : 'PM';

    const formattedHour = hours % 12 || 12; // Convert 24-hour to 12-hour format and pad
    return `${month}/${day}/${year} ${formattedHour}:${minutes}:${seconds} ${ampm}`;
  }

  private handleSliderChange = (range: [number, number]) => {

    console.log('handleSliderChange called with range:', range);

    if (!range || range.length !== 2 || typeof range[0] === 'undefined' || typeof range[1] === 'undefined') {
      return;
    }

    const startDate = new Date(range[0]);
    const endDate = new Date(range[1]);

    console.log('handleSliderChange startDate:', startDate);
    console.log('handleSliderChange endDate:', endDate);

    const contiguousDates: Date[] = [];
    for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
      contiguousDates.push(new Date(d));
    }

    const categories: powerbi.DataViewCategoricalColumn = this.dataView.categorical.categories[0];

    const table = categories.source.queryName.substring(0, categories.source.queryName.indexOf('.'))
    const colum = categories.source.displayName

    const values = contiguousDates.map(date => date.toISOString());

    console.log('Table:', table)
    console.log('Column:', colum)
    console.log('handleSliderChange range to date:', values);

    const advancedFilter: models.IAdvancedFilter = {
      $schema: "http://powerbi.com/product/schema#advanced",
      filterType: models.FilterType.Advanced,
      target: {
        table: table,
        column: colum
      },
      logicalOperator: "And",
      conditions: [{
          operator: "GreaterThan",
          value: startDate.toISOString()
        },
        {
          operator: "LessThan",
          value: endDate.toISOString()
        }
      ]
    };

    this.visualHost.applyJsonFilter(advancedFilter, "general", "Filter", powerbi.FilterAction.merge);
    console.log("FILTER:", advancedFilter)
    console.log("FILTER FUNCTION CALLED")
  };


  private clear() {
    console.log('clear method called');
    this.renderComponent();
  }


  public destroy(): void {
    console.log('destroy method called');
    ReactDOM.unmountComponentAtNode(this.target);
  }
}