Изменить содержание контроля в листовке

Question

Я создал новый элемент управления из наследства:

L.Control.extend({
            options: {
                position: position,

                descriptionHeader: 'This is a description',
                descriptionText: 'Label',

                counterHeader: 'This is a description',
                counterText: 'Label',

                className: 'leaflet-control-custom',
                labelClassName: 'button-label'
            },
            setDescriptionHeader(text: string){
                console.log("here");
                this.options.descriptionHeader = text;
            },
            setDescriptionText(text: string){
                this.options.descriptiontext = text;
            },
            setDescriptionCounterHeader(text: string){
                this.options.counterHeader = text;
            },
            setDescriptionCounterText(text: string){
                this.options.counterText = text;
            },
            onAdd: function (map) {
                let mainContainer: any = L.DomUtil.create('div', 'description-control');
                let container: any = L.DomUtil.create('div', 'description-options');
                let counterContainer: any = L.DomUtil.create('div', 'description-options-2');


                let header: HTMLElement = document.createElement("h2");
                header.className = 'description-title';
                header.innerText = this.options.descriptionHeader;
                container.appendChild(header);

                let text: HTMLElement = document.createElement("span");
                text.className = 'description-text';
                text.innerText = this.options.descriptionText;
                container.appendChild(text);


                let counter: HTMLElement = document.createElement("h2");
                counter.className = this.options.labelClassName;
                counter.innerText = this.options.counterHeader;
                counterContainer.appendChild(counter);

                let counterText: HTMLElement = document.createElement("span");
                counterText.className = this.options.labelClassName;
                counterText.innerText = this.options.counterText;
                counterContainer.appendChild(counterText);


                mainContainer.appendChild(counterContainer);
                mainContainer.appendChild(container);

                return mainContainer;
            }
        });

Я хочу, чтобы содержимое этого элемента управления обновлялось автоматически при изменении внешней переменной или при запуске действия:

Я хочу иметь возможность передавать некоторые переменные в элемент управления, чтобы обновить его текст. Я пробовал несколько решений, таких как установка сеттеров для переменных, но это не работает.

Элемент управления выглядит следующим образом:

Не могли бы вы показать мне способ обновления содержимого моего контроля.

благодарю вас