Markers are Flikering in React about google-map-react HOT 6 OPEN

import { createRoot } from 'react-dom/client';
...

const HQMarkerTemplate: React.FC = () => (
  <>
   <div>Test Marker</div>
  </>
);

export const MapHandler = () => {
  const handleApiLoaded = (map: GoogleMapReact, maps: any) => {
    const HQMarker = function (lat, lng) {
        this.lat = lat;
        this.lng = lng;
        this.pos = new maps.LatLng(lat, lng);
    };

    HQMarker.prototype = new maps.OverlayView();
    HQMarker.prototype.onAdd = function () {

      // here is the solution -->
      const container = document.createElement('span');
      const root = createRoot(container);
      root.render(<HQMarkerTemplate />);

      const panes = this.getPanes();
      panes.overlayImage.appendChild(container);
    };

    HQMarker.prototype.draw = function () {
      var overlayProjection = this.getProjection();
      var position = overlayProjection.fromLatLngToDivPixel(this.pos);
      var panes = this.getPanes();
      panes.overlayImage.style.left = position.x + "px";
      panes.overlayImage.style.top = position.y - 20 + "px";
    };

    new HQMarker(endPoint.lat, endPoint.lng).setMap(map);
  };

    ...
    ...
    ...


  return (
    <GoogleMapReact
        yesIWantToUseGoogleMapApiInternals
        onGoogleApiLoaded={({ map, maps }) => handleApiLoaded(map, maps)}
        options={...}
    />
  )
}