我有一个项目的客户，需要我使用一个图像Map。寻找一个好的库，我几乎无法找到任何维护。我发现最好的是这个库。
https://github.com/img-mapper/react-img-mapper
出于某种原因，它在React上工作得很好，但在Next.js上失败了-它只是没有渲染。
我试图打开一个沙盒来添加我报告的问题，但是库使它失败（与useState有关）。我想可能是因为它试图将其渲染为服务器组件，所以将"use client"添加到我渲染图像Map的组件中，但仍然什么都没有。
以下是两个Sandbox：
Next.js - https://codesandbox.io/p/sandbox/brave-bush-snhmy6 React - https://codesandbox.io/p/sandbox/staging-sun-sfqczd
我看过库的代码，它并不太复杂（就工作部件和组件而言。我没有太多的canvas工作经验），所以我试图将整个代码复制到我的项目中，并尽可能地修改。
我已经将"use client“添加到image map组件本身，并且还将img标记替换为next/image Image标记。仍然没有显示任何内容（使用height和width的常量值来尝试缩小问题的范围）。如果有任何帮助，将不胜感激（也很乐意参考不同的工作库）。

return (
    <div ref={container} id="img-mapper" style={styles(props).container}>
      <Image
        ref={img}
        role="presentation"
        // className="img-mapper-img h-96 w-64"
        style={{
          ...styles(props).img,
          ...(!imgRef ? { display: "none" } : {}),
          height: 640,
          width: 480,
        }}
        src={srcProp}
        useMap={`#${map.name}`}
        alt="map"
        onClick={(event) => imageClick(event, props)}
        onMouseMove={(event) => imageMouseMove(event, props)}
        height={640}
        width={480}
      />
      <canvas
        ref={canvas}
        className="img-mapper-canvas"
        style={styles().canvas}
      />
      <map className="img-mapper-map" name={map.name} style={styles().map}>
        {isRendered && !disabled && imgRef && renderAreas()}
      </map>
    </div>
  );
};

字符串