Need help for defining properties in format visual pane.

Hi, I've configured my settings.ts file as well. I'm able to get properties panel but the color change change is not reflected in UI. 
UI Looks like this: 



here is my code for settings.ts file

"use strict";

import { formattingSettings } from "powerbi-visuals-utils-formattingmodel";



class LabelsCardSetting extends formattingSettings.SimpleCard {
    name: string = "labels"; // same as capabilities object name
    displayName: string = "Labels";
    // selector is not needed and has been removed

    public fontFamily: formattingSettings.FontPicker = new formattingSettings.FontPicker({
        name: "fontFamily", // same as capabilities property name
        value: "Arial, sans-serif"
    });

    public fontSize: formattingSettings.NumUpDown = new formattingSettings.NumUpDown({
        name: "fontSize", // same as capabilities property name
        value: 11
    });

    public bold: formattingSettings.ToggleSwitch = new formattingSettings.ToggleSwitch({
        name: "bold", // same as capabilities property name
        value: false
    });

    public italic: formattingSettings.ToggleSwitch = new formattingSettings.ToggleSwitch({
        name: "italic", // same as capabilities property name
        value: false
    });

    public underline: formattingSettings.ToggleSwitch = new formattingSettings.ToggleSwitch({
        name: "underline", // same as capabilities property name
        value: false
    });

    public font: formattingSettings.FontControl = new formattingSettings.FontControl({
        name: "font",   // must be unique within the same object
        displayName: "Font",
        fontFamily: this.fontFamily,
        fontSize: this.fontSize,
        bold: this.bold,           //optional
        italic: this.italic,       //optional
        underline: this.underline  //optional
    });

    public slices: formattingSettings.Slice[] = [this.font];
}

// Slice color settings
class SlicesColorCardSetting extends formattingSettings.SimpleCard {
    name: string = "sliceColors";
    displayName: string = "Slice Colors";

    public dynamicSliceColors: formattingSettings.ColorPicker[] = [];
    private defaultColors: string[] = ['#AEDFF7', '#73C6F3', '#3498DB', '#2E86C1', '#1B4F72', '#154360'];

    // Dynamically generate ColorPicker settings based on the number of slices
    public updateSliceColors(sliceNames: string[], currentColors: Record<string, string> = {}) {
        // Create a lookup for existing colors
        const existingColors: Record<string, formattingSettings.ColorPicker> = {};
        for (const colorPicker of this.dynamicSliceColors) {
            existingColors[colorPicker.name] = {
                name: colorPicker.name,
                value: colorPicker.value,
            };
        }

        // Map slice names to dynamic slice colors
        const updatedSliceColors: formattingSettings.ColorPicker[] = [];
        for (let i = 0; i < sliceNames.length; i++) {
            const sliceName = sliceNames[i];
            const colorName = `sliceColor${i + 1}`;
            const defaultColor = this.defaultColors[i % this.defaultColors.length];

            updatedSliceColors.push(
                new formattingSettings.ColorPicker({
                    name: colorName,
                    displayName: `${sliceName} Color`,
                    value: typeof currentColors[colorName] === 'string' ? { value: currentColors[colorName] } : currentColors[colorName] || existingColors[colorName]?.value || defaultColor,
                })
            );
        }

        this.dynamicSliceColors = updatedSliceColors;
        this.slices = this.dynamicSliceColors;

        console.log("Updated Slice Colors:", this.dynamicSliceColors);
        console.log("Retained Colors:", existingColors);
        console.log("Dynamic Slice Colors After Update:", this.dynamicSliceColors);
    }

    public slices: formattingSettings.Slice[] = [];
}


export class VisualFormattingSettingsModel extends formattingSettings.Model {
    updateSliceColors(sliceNames: string[]) {
        throw new Error("Method not implemented.");
    }
    public labels: LabelsCardSetting = new LabelsCardSetting();
    public sliceColors: SlicesColorCardSetting = new SlicesColorCardSetting();
    public cards: formattingSettings.SimpleCard[] = [this.labels, this.sliceColors];
    static parse: any;

    // Bind font properties to DataLabels objects
    public bindToDataLabels(dataLabels: any) {
        dataLabels.fontFamily = this.labels.fontFamily.value;
        dataLabels.fontSize = this.labels.fontSize.value;
        dataLabels.bold = this.labels.bold.value;
        dataLabels.italic = this.labels.italic.value;
        dataLabels.underline = this.labels.underline.value;
        console.log(dataLabels);
    }

    // }
    public bindToSliceColors(sliceNames: string[], sliceColors: any[]) {
        const currentColors = sliceNames.reduce((acc, sliceName, index) => {
            acc[`sliceColor${index + 1}`] = sliceColors[index];
            return acc;
        }, {} as Record<string, string>);

        this.sliceColors.updateSliceColors(sliceNames, currentColors);
        this.sliceColors.dynamicSliceColors.forEach((colorPicker, index) => {
            sliceColors[index] = colorPicker.value.value; // Assuming colorPicker.value is an object with a 'value' property
        });

        // public getSelectedSliceColors(): any[] {
        //     return this.sliceColors.dynamicSliceColors.map(colorPicker => colorPicker.value);
        // }
    }
}