Нужно сделать балун с аккордионом (раскрывающимся дивом) на Яндекс Картах

Нужно сделать балун с аккордионом. Делаю на основе примера из песочницы Яндекс Карт - https://yandex.ru/dev/maps/jsbox/2.1/balloon_autopan/

Суть проблемы: Если делаю балун с изначально открытым аккордионом - при закрытии аккордиона балун не меняет размер. На месте аккордиона остается пустое место. Если делаю аккордион изначально закрытым - балун не меняет размер при открытии и аккордион не видно.

В документации написано, что у шаблонов есть метод onSublayoutSizeChange, который "автоматически вызывается при изменении размеров вложенного макета, добавленного с параметром 'observeSize'". https://yandex.ru/dev/maps/jsapi/doc/2.1/ref/reference/layout.templateBased.Base.html Казалось бы это и должно произойти в моем случае, но этот метод не вызывается.

Вот balloonLayout. Указан "observeSize". В методе build навешиваю слушатель события

 function createDistrictLayout() {
    districtLayout = ymaps.templateLayoutFactory.createClass(
            '<div class="balloon top">' +
            '<div class="arrow"></div>' +
            '<div class="balloon-inner">' +
            '$[[options.contentLayout observeSize]]' +
            '</div>' +
            '</div>', {
                /**
                 * Строит экземпляр макета на основе шаблона и добавляет его в родительский HTML-элемент.
                 * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/layout.templateBased.Base.xml#build
                 * @function
                 * @name build
                 */
                build: function() {
                    this.constructor.superclass.build.call(this);

                    this._$element = $('.balloon', this.getParentElement());

                    this.applyElementOffset();

                    this._$element.find('.close')
                        .on('click', $.proxy(this.onCloseClick, this));
                        
                    document.getElementById('chevron').addEventListener('click', (e) => {
                        let collapsible = document.getElementById('collapsible')
                        if (collapsible.style.display === "block") {
                            collapsible.style.display = "none";
                        } else {
                            collapsible.style.display = "block";
                        }
                   
                    })
                },...
 

Вот balloonContentLayout:

 // Создание вложенного макета содержимого балуна.
        districtContentLayout = ymaps.templateLayoutFactory.createClass(`
            <div class="balloon-header">
            <div class="balloon-header-district-name">$[properties.test]</div>
            <div class="toobject-link" id="district-link">Перейти<img src="/templates/sections/GeoMap/arrow-right.svg"></div>
            </div>
            <div class="balloon-content">
                            <div class="balloon-row">
                                <div class="label">Qweqw</div>
                                <div class="item">dfsdf</div>
                            </div>
                            <div class="balloon-row">
                                <div class="label">Dasdas</div>
                                <div class="item">dfsdf</div>
                            </div>
                            <div class="balloon-row">
                                <div class="label">Fdssds</div>
                                <div class="item">dfsdf</div>
                            </div>
                            <div class="balloon-row">
                                <div class="label">Erwersd</div>
                                <div class="item">dfsdf</div>
                            </div>
            </div>
            <div class="balloon-footer">
            <div class="chevron-icon" id="chevron"><img src="/templates/sections/GeoMap/chevron-up.svg"></div>
            <span class="balloon-footer-text">DFdfdffff</span><span class="balloon-footer-value">)</span>
            </div>
            <div class="balloon-collapsibe" id="collapsible">
                            <div class="balloon-row">
                                <div class="label">ASdfsdf</div>
                                <div class="item">dfsdf</div>
                            </div>
                            <div class="balloon-row">
                                <div class="label">Fdsfsd</div>
                                <div class="item">dfsdf</div>
                            </div>
                            <div class="balloon-row">
                                <div class="label">SDfrfrI</div>
                                <div class="item">dfsdf</div>
                            </div>
                            <div class="balloon-row">
                                <div class="label">Gsdfdfdf</div>
                                <div class="item">dfsdf</div>
                            </div>
                            <div class="balloon-row">
                                <div class="label">Fgdfgdfg</div>
                                <div class="item">dfsdf</div>
                            </div>
            <div>
            `)}

Вот здесь создаю балун:

let districtMark = new ymaps.Placemark(GeoMap.map.data[districtName].coord, {
        iconContent: GeoMap.map.districtCollections[districtName].properties.info.name,
        test: GeoMap.map.districtCollections[districtName].properties.info.name,
    }, {
        iconLayout: placemarkLayout,
        iconContentLayout: placemarkContentLayout,
        iconShape: {
                type: 'Rectangle',
                coordinates: [
                    [-25, -25], [25, 25]
                ]
            },
        iconOffset: [-40, -50],
        balloonShadow: false,
        balloonLayout: districtLayout,
        balloonContentLayout: districtContentLayout,
        balloonPanelMaxMapArea: 0,
        hideIconOnBalloonOpen: true
    })