Как настроить группу объявлений в Яндекс Карты для вывода?

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

Пример:

Так же что бы можно было влиять на стили окна, текст и картинку через css.

В данный момент я получаю подобное но без списка имен (они просто не вставляются в список слево) и овно с информацией не настраивается.

Текущий результат:

Хотелось бы узнать как можно решить эту проблемы что бы реализовать настраиваемое окно.

Мой текущий код с отображением единичных объявления (работает как положено) и с груповыми которые отображаются не корректно.

<script type="text/javascript" src="//api-maps.yandex.ru/2.1/?lang=en_RU"></script>
<script>
var markers = [
    @if(isset($data['cars']))
    @foreach($data['cars'] as $car)
    {
        name: "{{ $car['name'] }}",
        link: "{{ $car['link'] }}",
        phone: "{{ $car['phone'] }}",
        image: "{{ $car['image'] }}",
        lat: {{ $car['latitude'] }},
        lon: {{ $car['longitude'] }}
    },
    @endforeach
    @endif
];

ymaps.ready(init);

function init() {
    var map = new ymaps.Map("ya-map", {
        center: [55.75, 37.61],
        zoom: 10
    });

    // Добавление меток на карту
    var placemarks = [];

    markers.forEach(function (marker) {
        var placemark = new ymaps.Placemark([marker.lat, marker.lon], {
            hintContent: marker.name,
            balloonContent: '<div class="map-model p-2 overflow-hidden"><a class="map-model__images mb-2" href="' + marker.link + '" target="_blank"><img class="img-fluid" src="' + marker.image + '"></a><div class="map-model__info"><a class="info-title mb-1" href="' + marker.link + '" target="_blank">' + marker.name + '</a><div class="info-phone d-flex flex-wrap align-items-center"><a href="tel:' + marker.phone + '" class="mr-1 phone">' + marker.phone + '</a></div></div><div class="map-model__arrow"></div></div>'
        }, {
            preset: 'islands#darkGreenIcon',
            iconColor: '#ff0000'
        });

        placemarks.push(placemark);
    });

    var clusterer = new ymaps.Clusterer({
        preset: 'islands#invertedRedClusterIcons',
        groupByCoordinates: false,
        clusterDisableClickZoom: true,
        clusterHideIconOnBalloonOpen: false,
        geoObjectHideIconOnBalloonOpen: false
    });

    clusterer.add(placemarks);
    map.geoObjects.add(clusterer);

    // Создание списка
    var names = document.getElementById('names');
    var list = document.createElement('ul');
    names.appendChild(list);

    markers.forEach(function (marker, index) {
        var item = document.createElement('li');
        var name = document.createElement('div');
        name.textContent = marker.name;
        name.setAttribute('data-index', index);
        name.style.cursor = 'pointer';
        name.addEventListener('click', function () {
            var info = document.getElementById('info');
            var index = this.getAttribute('data-index');
            info.innerHTML = '<div class="map-model p-2 overflow-hidden"><a class="map-model__images mb-2" href="' + marker.link + '" target="_blank"><img class="img-fluid" src="' + marker.image + '"></a><div class="map-model__info"><a class="info-title mb-1" href="' + marker.link + '" target="_blank">' + marker.name + '</a><div class="info-phone d-flex flex-wrap align-items-center"><a href="tel:' + marker.phone + '" class="mr-1 phone">' + marker.phone + '</a></div></div><div class="map-model__arrow"></div></div>';
        });

        item.appendChild(name);
        list.appendChild(item);
    });

}
</script>
<div id="ya-map" style="width:100%;height:700px;overflow:hidden;border-radius:10px;"></div>