Нужно менять цвет placemark при клике на него на яндекс картах

В своем проекте я использую яндекс карты. На карте у меня отресовываются метки placemark. При клике на метку она должна становится "активной" и менять цвет. Как это можно сделать?

Достаточно просто будет показать пример, где при клике на placemark меняется цвет

ymaps.ready(function () {
        const blueTemplate = createPlacemarkContent(styles.blue),
                  whiteTemplate = createPlacemarkContent(styles.white),
                  redTemplate = createPlacemarkContent(styles.red);
        var myMap = new ymaps.Map(
            'map',
            {
              center: [53.905877, 27.560326],
              zoom: 10
            },
            {
              searchControlProvider: 'yandex#search'
            }
        )
       var clusterer = new ymaps.Clusterer({   
          clusterIcons: [{
            href: 'assets/img/clusterer.svg',
            size: [32, 32],
            offset: [-16, -16]
          },],
          clusterIconContentLayout: createClusterContent()
      }),
        geoObjects = []

      
        mainStore.pharmacies.forEach((pharmacy, i) => {
            const iconContent = '100 из 300'
            
            const placemark = new ymaps.Placemark(
              pharmacy.location,
              { iconContent },
              {
                iconLayout: 'default#imageWithContent',
                // нужна прозрачная
                iconImageHref: 'assets/img/1.svg',
                iconImageSize: [100, 32],
                iconImageOffset: [-50, -32],
                iconContentLayout: blueTemplate
              }
            )

            const activePlacemark = new ymaps.Placemark(
              pharmacy.location,
              { iconContent },
              {
                iconLayout: 'default#imageWithContent',
                iconImageHref: 'assets/img/1.svg',
                iconImageSize: [100, 32],
                iconImageOffset: [-50, -32],
                iconContentLayout: redTemplate
              }
            )
          
          //  placemark.events.add('mousedown', function (e) {
                // 0, 1 или 2 в зависимости от того, какая кнопка мыши нажата (В IE значение может быть от 0 до 7).
         //       e.stopPropagation()
         //       alert(e.get('domEvent').originalEvent.button);
         //   });

            geoObjects[i] = placemark
        })

        clusterer.add(geoObjects);
        myMap.geoObjects.add(clusterer);
        myMap.setBounds(clusterer.getBounds(), {
          checkZoomRange: true
        });
        setMap(myMap)
    })
  })


 export const styles = {
  blue: {
    color: '#ffffff',
    backgroundColor: '#056ECF',
    fontSize: '12px',
    borderColor: '#056ECF',
    svgBottomSize: {
      height: '12',
      width: '16',
    },
    size: {
      minWidth: '61px',
      minHeight: '26px',
    }
  },
  white: {
    color: '#056ECF',
    backgroundColor: '#ffffff',
    fontSize: '12px',
    borderColor: '#056ECF',
    svgBottomSize: {
      height: '12',
      width: '16',
    },
    size: {
      minWidth: '61px',
      minHeight: '26px',
    }
  },
  red: {
    color: '#ffffff',
    backgroundColor: '#FF3C6B',
    fontSize: '14px',
    borderColor: '#FF3C6B',
    svgBottomSize: {
      height: '13',
      width: '18',
    },
    // size: {
    //   minHeight: '28px',
    //   minWidth: '69px',
    // },
    size: {
      minWidth: '61px',
      minHeight: '26px',
    }
  }
}

export const createPlacemarkContent = (styles) => {

  return ymaps?.templateLayoutFactory?.createClass(`
    <style>
      .placemark__wrapper {
        width: 100px;
        height: 32px;
      }
  
      .placemark__content {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        color: ${styles.color};
        font-weight: 700;
        font-size: ${styles.fontSize};
        position: relative;
        padding: 0 8px;
        background: ${styles.backgroundColor};
        border: 2px solid ${styles.borderColor};
        border-radius: 50px;
        min-width: ${styles.size.minWidth};
        min-height: ${styles.size.minHeight};
      }
  
      .placemark__content svg{
        position: absolute;
        left: 50%;
        top: 100%;
        transform: translate(-50%, -4px);
      }
    </style>
      <div class="placemark__wrapper">
        <div class="placemark__content">
          $[properties.iconContent]
          <svg width="${styles.svgBottomSize.width}" height="${styles.svgBottomSize.height}" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8.12329 10.2451L13.7142 3.25653C13.7417 3.22206 13.7485 3.19568 13.7504 3.17573C13.7526 3.15145 13.7482 3.12084 13.7332 3.0895C13.7181 3.05815 13.6969 3.03562 13.6766 3.0222C13.6599 3.01117 13.635 3 13.5909 3H8H2.40914C2.36501 3 2.34015 3.01117 2.32342 3.0222C2.30307 3.03562 2.2819 3.05815 2.26683 3.0895C2.25177 3.12084 2.2474 3.15145 2.24963 3.17573C2.25147 3.19568 2.25828 3.22206 2.28585 3.25653L7.8767 10.2451C7.93991 10.3241 8.06009 10.3241 8.12329 10.2451Z" fill="${styles.backgroundColor}" stroke="${styles.borderColor}" stroke-width="2"/>
            <rect width="16" height="4" fill="${styles.backgroundColor}"/>
          </svg>
        </div>
      </div>
      <script>alert('wdwdwd')</script>`)
}