How to style a balloon on react yandex map how to do it right?

Question

Yandex maps

{
                                coordinatesMap.map(item => { //через цикл вывели много меток PlaceMark
                                    return (
                                        <Placemark // метка на карте. Чтобы сделать несколько меток Placemark надо поместить в массив
                                            key={item.id}
                                            geometry={item.coord} // координаты метки
                                            options={{
                                                iconLayout: 'default#image',
                                                iconImageHref: pin, //установили в качестве метки свою картинку
                                                iconImageSize: [30, 30], // размер нашей картинки
                                                hideIconOnBalloonOpen: false, //запрет на скрытие метки по клику на балун
                                                balloonOffset: [3, -40]

                                            }}
                                            modules={[ //чтобы видеть хинты и балуны подключаем данные модули
                                                'objectManager.addon.objectsBalloon',
                                                'objectManager.addon.objectsHint',
                                            ]}
                                            properties={{
                                                balloonContentHeader: "Balloon3",
                                                balloonContent: "<p style='color: red'>Balloon3 <strong>Test</strong></p>"
                                            }}
                                        />
                                    )
                                })

I display labels where I fill the balloon with my content. And how to style the balloon itself? In this embodiment, from rectangular with an arrow at the bottom. How to make it so that, for example, it is round or put its own arrow. Thanks in advance. If there is an answer, you can throw off an example or a link to an example.

Answer 1

https://yandex.ru/dev/maps/jsbox/2.1/geoobject_con...

Answer 2

I recently encountered such a problem, I read this option in the documentation

balloonContentBody: [
  `
    <div class="baloon-content">
        <a href={link} class="baloon-content__title">{name}</a>
        <div class="baloon-content__body">{description}</div>
        <div class="baloon-content__link">
            <a href={link} class="baloon__link">Подробнее</a>
        </div>
    </div>
    `,
].join("");

I made a new markup for the balloon, and then stylized it as I need