next.js onLoad problem fixed

Author: NishargShah

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-img-mapper",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "React Component to highlight interactive zones in images",
   "keywords": [
     "react",

src/ImageMapper.tsx

@@ -52,6 +52,13 @@ const ImageMapper: React.FC<ImageMapperProps> = (props: ImageMapperProps) => {
   const ctx = useRef<CanvasRenderingContext2D>(null);
   const isInitialMount = useRef<boolean>(true);
 
+  useEffect(() => {
+    initCanvas(true);
+    ctx.current = canvas.current.getContext('2d');
+    updateCacheMap();
+    setRendered(true);
+  }, []);
+
   useEffect(() => {
     if (isInitialMount.current) {
       isInitialMount.current = false;
@@ -62,12 +69,6 @@ const ImageMapper: React.FC<ImageMapperProps> = (props: ImageMapperProps) => {
     }
   }, [props, isInitialMount, imgRef]);
 
-  useEffect(() => {
-    ctx.current = canvas.current.getContext('2d');
-    updateCacheMap();
-    setRendered(true);
-  }, []);
-
   useEffect(() => {
     container.current.clearHighlightedArea = () => {
       setMap(storedMap);
@@ -293,7 +294,6 @@ const ImageMapper: React.FC<ImageMapperProps> = (props: ImageMapperProps) => {
         useMap={`#${map.name}`}
         alt="map"
         ref={img}
-        onLoad={() => initCanvas(true)}
         onClick={event => imageClick(event, props)}
         onMouseMove={event => imageMouseMove(event, props)}
       />