Cannot Create multiple canvases on the same page.

[edward1127]

I use next13.
When I create a single canvas, everything works like a charm.
However, when I want to create multiple canvases on the same page, it just doesn't work.
Only one canvas will show up.
Does anyone know what might be the root cause?

"use client";

import React, {
  useEffect,
  useState,
  useRef,
  forwardRef,
  useImperativeHandle,
} from "react";
import {
  ReactSketchCanvas,
  ReactSketchCanvasRef,
  ReactSketchCanvasProps,
  CanvasPath,
} from "react-sketch-canvas";
import { IQuestion } from "@/interfaces/problems";
import { cn } from "@/lib/style";
import { environment } from "@/lib/environment";
import {
  IconBrush,
  IconEraser,
  IconArrowBackUp,
  IconArrowForwardUp,
} from "@tabler/icons-react";
import { useFormContext, useController } from "react-hook-form";
import useProblemControl from "@/hooks/useProblemControl";
import { messageColorMap } from "@/constants/problems/constants";
import { useWindowDimensions } from "@/hooks/useWindowsDimensions";

const styles = {
  borderWidth: 0,
};

type SketchCanvasProps = ReactSketchCanvasProps & {
  className?: string;
  question: IQuestion;
  imgSrc?: string;
  code?: string;
  paths?: CanvasPath[];
};

const SketchCanvas = (
  { className, question, imgSrc, code, paths, ...rest }: SketchCanvasProps,
  ref: React.Ref<ReactSketchCanvasRef | null>
) => {
  const [width, setWidth] = useState("0");
  const [height, setHeight] = useState("0");
  const [imgURL, setImgURL] = useState<string | undefined>(undefined);
  const canvasRef = useRef<ReactSketchCanvasRef | null>(null);

  const {
    control,
    formState: { isSubmitted },
  } = useFormContext();
  const { result, submittedMessage, questionKey } = useProblemControl({
    question,
    code,
  });

  const { field } = useController({
    name: questionKey,
    control,
  });
  console.log(imgURL);
  useImperativeHandle(ref, () => canvasRef.current);

  const { dimesion } = useWindowDimensions();

  const setImgSize = React.useCallback(() => {
    if (!imgSrc) return;

    const transformImageURL = (src: string) => {
      return `${environment.apiUrl}/question-judge/files/?key=${src}`;
    };
    const img = new Image();
    img.src = transformImageURL(imgSrc);

    img.onload = function () {
      const width = Math.min(img.naturalWidth, dimesion.width - 10, 576);
      const height = (width * img.naturalHeight) / img.naturalWidth;
      setWidth(`${width}px`);
      setHeight(`${height}px`);
      setImgURL(transformImageURL(imgSrc));
    };
  }, [imgSrc, dimesion.width]);

  useEffect(() => {
    if (imgSrc) {
      setImgSize();
    }
  }, [imgSrc]);

  useEffect(() => {
    if (paths) {
      canvasRef.current?.loadPaths(paths);
    }
  }, [paths]);

  return (
    <div key={`${questionKey}`} className="mt-3">
      <div
        className={cn(
          " bg-gray-50 rounded-lg border border-gray-200 max-w-[90vw] md:max-w-xl"
        )}
        style={{ width: width }}
      >
        <div className="flex justify-between items-center py-1 px-3">
          <div className="flex flex-wrap items-center divide-gray-200 sm:divide-x">
            <div className="flex items-center text-gray-500 py-1 gap-x-1">
              <button
                type="button"
                className="btn btn-ghost btn-xs btn-circle"
                onClick={() => {
                  canvasRef.current?.eraseMode(false);
                }}
              >
                <IconBrush className="w-5 h-5 fill-gray-500" />
              </button>
              <button
                type="button"
                className="btn btn-ghost btn-xs btn-circle"
                onClick={() => canvasRef.current?.eraseMode(true)}
              >
                <IconEraser className="w-5 h-5" />
              </button>
              <button
                type="button"
                className="btn btn-ghost btn-xs btn-circle"
                onClick={() => canvasRef.current?.undo()}
              >
                <IconArrowBackUp className="w-5 h-5" />
              </button>
              <button
                type="button"
                className="btn btn-ghost btn-xs btn-circle"
                onClick={() => canvasRef.current?.redo()}
              >
                <IconArrowForwardUp className="w-5 h-5" />
              </button>
            </div>
          </div>
        </div>

        <ReactSketchCanvas
          key={`${questionKey}-canvas`}
          ref={(e) => {
            canvasRef.current = e;
            field.ref(e);
          }}
          className={cn("px-1 pb-1 max-w-full", className)}
          style={styles}
          height={height}
          width={width}
          strokeWidth={4}
          strokeColor="black"
          canvasColor="white"
          backgroundImage={imgURL}
          onChange={(e) => {
            if (e.length > 0) field.onChange(e);
          }}
          {...rest}
        />
      </div>
      {isSubmitted && (
        <span className={cn("text-base", messageColorMap[result])}>
          {submittedMessage}
        </span>
      )}
    </div>
  );
};

export default forwardRef(SketchCanvas);

[edward1127]

adding the id solves the issue
<ReactSketchCanvas id={`${questionKey}-canvas`} ref={(e) => { canvasRef.current = e; field.ref(e); }} className={cn("px-1 pb-1 max-w-full", className)} style={styles} height={height} width={width} strokeWidth={4} strokeColor="black" canvasColor="white" backgroundImage={imgURL} onChange={(e) => { if (e.length > 0) field.onChange(e); }} {...rest} />