marker.js 2 Documentation: Using marker.js with React is not working with next js

I am using this in my next js app according to the mentioned documentation but it’s not working. (not give an error but nothing happens when clicking to image)

I think this library is not compatible with nextjs. I should use another.

official doc-> https://markerjs.com/docs/react-walkthrough/
library-> https://www.npmjs.com/package/image_anotation

import React, { useRef } from 'react';
import * as markerjs2 from 'markerjs2';
import Image from 'next/image';
import styles from "styles/sitePreMobilizationReview/sitePreMobilizationReview.module.css";

const YourComponent: React.FC<{ img: { url: string, file: File }; imgIndex: number }> = ({ img, imgIndex }) => {
  const imgRef = useRef<HTMLImageElement>(null);

  const handleAnnotation = () => {
    console.log("I am clicking");

    if (!imgRef.current) {
      console.error(`Element with ID 'issueImage-${imgIndex + 1}' not found.`);
      return;
    }

    try {
      const markerArea = new markerjs2.MarkerArea(imgRef.current);
      console.log("MarkerArea initialized:", markerArea);

      markerArea.addEventListener('render', (event) => {
        console.log("Event listener triggered:", event);

        if (imgRef.current) {
          imgRef.current.src = event.dataUrl;
        }
      });
      markerArea.show();
      console.log("MarkerArea shown");
    } catch (error) {
      console.error("Error initializing markerjs2:", error);
    }
  };

  const handleError = () => {
    console.log("Image load error");
    URL.revokeObjectURL(URL.createObjectURL(img.file));
  };

  return (
    <Image
      src={img.url}
      alt={`Issue Image ${imgIndex + 1}`}
      className={styles.issueImage}
      width={100}
      height={100}
      ref={imgRef}
      onError={handleError}
      id={`issueImage-${imgIndex + 1}`}
      onClick={handleAnnotation}
    />
  );
};

export default YourComponent;