How to use the Toast Ui Image Editor React library with includeUi set to false?

Question

Summary

I am encountering an issue while using Toast Ui Image Editor React library. I can't figure out how to import an image and set up an editing area while passing the includeUi parameter as false.

I have tried several approaches, including the loadImageFromUrl and addImageObject methods, but without success.

How can I use the library without the UI to integrate it directly into my React component?

Code

const ImageEditingContent = () => {
  const editorRef = createRef();
  const imagePath = '...';

  return (
    <div className="hk-pt-1">
      <div className="hk-w-140 hk-h-[315px]">
        <ImageEditor
          ref={editorRef}
          includeUi={false}
          cssMaxHeight={315}
          cssMaxWidth={560}
          usageStatistics={false}
        />
      </div>
      <div className="hk-mt-5 hk-m-auto hk-w-fit">
        <></>
      </div>
    </div>
  );
};

Version

^3.15.2