Add custom crop functionality using ReactJS and TypeScript

[tripti-tgs]

Hi,

I am having a problem. I want to add crop functionality using API of tui image editor

Summary :-

I tried to build crop function by api for this package but I am facing this problem and i don't know how is the problem
I have tried to implement it in react and type script so can you tell me where is the problem and what is missed

Code :-

const handleCrop = () => {
    const editorInstance = editorInstanceRef?.current;
    try {
      editorInstance.stopDrawingMode();
      editorInstance.startDrawingMode("CROPPER");
      editorInstance.setCropzoneRect(1, 1, 1, 1);
      setshowCropButton(true);
    } catch (err) {
      console.error(err);
    }
  };

  const handleCropApply = () => {
    const editorInstance = editorInstanceRef.current;
    editorInstance.crop(editorInstance.getCropzoneRect());
  };

Demo Link :-

https://codesandbox.io/p/sandbox/tui-crop-function-forked-vq3f7z?file=%2Fsrc%2FApp.tsx%3A53%2C1

Screenshots :-

Version :-

ReactJS: "18.2.0"
Typescript: "4.4.4"
tui-image-editor: "3.15.3"