canvas shows only black screen in React (trying NOT to use react wrapper )

[Elli-Jeon]

Describe the bug

• canvas shows only black screen like below

To Reproduce
Steps to reproduce the behavior:

Here is my entire code

const MyImageEditor = ({editingImage}) => {

  const toastImageEditorRef = useRef();

useEffect(() => {
    const canvas = toastImageEditorRef.current;

    const options = {
      includeUI: {
        loadImage: {
          path: '/character.png',
          name: 'qwe',
        },
        uiSize: {
          width: '600px',
          height: '500px',
        },
        theme: theme,
      },
      cssMaxHeight: 350, //canvas 크기
      cssMaxWidth: 500,
      selectionStyle: {
        cornerSize: 20,
        rotatingPointOffset: 70,
      },
      usageStatistics: false,
    };

    // instance 정의
    let editorInstance;

    if (canvas) {
      editorInstance = new ImageEditor(toastImageEditorRef.current, options);
    }

    // 이미지 불러오기
    if (canvas && editingImage) {
      console.log(editorInstance, editingImage);

      editorInstance
        .loadImageFromFile(editingImage) // loadImageFromURL이 안되서 file 그자체를 가져와서
        .then(sizeValue => {
          editorInstance.ui.activeMenuEvent();
          editorInstance.ui.resizeEditor({ imageSize: sizeValue });
        })
        .catch(err => console.log(err));
    }
  }, [editingImage]);

  return (
    <canvas id="image-editor" ref={toastImageEditorRef} />
  );
}

editingImage comes from parent component as  *File* format.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: windows 10
• Browser : chrome
• Version : 3.15.2

Additional context
Add any other context about the problem here.

Good Day!!

I was trying to make my own image editor useing API directly in react. like example 2

BUT, i can only see this black screen instead of your image editor.

I could print ImageEditorInstance. and also this The executing command state is locked error message too.

If there is another way to use API directly or if i did something wrong, please let me know.

Thank you.

[Elli-Jeon]

It's because of my mistake. I should have used

instead of
<canvas id="image-editor" ref={toastImageEditorRef} /> should be <div />