Проблема с отображением baloon в Яндекс картах при нажатии на маркер. Как по-другому можно реализовать этот функционал?

Question

[seedovan]

Я использую next js и написал функционал, который открывает балун при нажатии на маркер на Яндекс картах (я использую react-yandex-maps). Проблема в том, что при первом клике балун открывается и все элементы в нем отображаются. Затем я нажимаю на и при следующих кликах балун открывается, но элементы внутри не отображаются:



Вот код, который я использую для отображения балуна, он взят отсюда: Статья на Хабре

import { useEffect } from "react";
import { createPortal } from "react-dom";

export default function Portal({ children, getHTMLElementId }) {
  // находим искомый HTML по id
  const mount = document.getElementById(getHTMLElementId);
  // создаём свой div
  const el = document.createElement("div");

  useEffect(() => {
    // добавляем свой див к искомому элементу
    if (mount) {
      mount.appendChild(el);
    }
    return () => {
      // удаляем элемент от искомого при завершении компоненты
      if (mount) mount.removeChild(el);
    };
  }, [el, mount]);
  // отменяем отрисовку при отсутствии искомого элемента
  if (!mount) return null;
  // собственно, пририсовываем React-элемент в div к искомому HTML
  return createPortal(children, el);
}

Данный код для отображения на карте:

const DynamicPortalWithNoSSR = dynamic(() => import("./Portal"), {
  ssr: false,
});

function WhMap({ posts, regionPosition, noRegionFlag }) {
  const [activePortal, setActivePortal] = useState(false);
  const [postPopup, setPostPopup] = useState(null);

  const map = useRef();

  return (
    <div>
      <YMaps>
        <Map
          id="map"
          width="100%"
          height="88vh"
          defaultState={{ center: [59.9386, 30.3141], zoom: 13 }}
          // включаем модули, отвечающие за всплывающие окна над геообъектами
          modules={["geoObject.addon.balloon", "geoObject.addon.hint"]}
          instanceRef={map}
        >
          {posts?.map((post) => (
            <>
                <Placemark
                  geometry={[
                    Number(post.latitude),
                    Number(post.longitude),
                  ]}
                  options={{
                    preset: "islands#darkBlueCircleDotIcon",
                    iconColor: "#284AC2",
                  }}
                  properties={{
                    iconContent: "2", // пару символов помещается
                    // создаём пустой элемент с заданными размерами
                    balloonContent:
                      '<div id="driver-2" class="driver-card"></div>',
                  }}
                  onClick={() => {
                    requestAnimationFrame(() => {
                      setActivePortal(true);
                      setPostPopup(post);
                    });
                  }}
                />
            </>
          ))}
        </Map>
        {activePortal && (
          <DynamicPortalWithNoSSR getHTMLElementId="driver-2">
            // здесь контент который отображается внутри balloon
          </DynamicPortalWithNoSSR>
        )}
      </YMaps>
    </Box>
  );
}

export default WhMap;