Can't crop multiple images with react avatar editor

Question

I'm using the react avatar editor library for my reactjs web so I can crop multiple images before uploading to the database. I used useRef in react to refer to <AvatarEditor/> to get the resulting image after cropping. Because I want to crop many images, I have created a useRef array to manage these many <AvatarEditor/>. Looking at the picture I put below, I can see that I have the crop frame at the top of the image but when the image is cropped, it only shows the default crop image. But that's because I upload more than 2 photos, it crop is wrong, but if I just upload 1 image and crop, it still works properly. The onMouseUp function is when you hold the mouse and drag the crop frame to select the place to crop and then release the mouse, you will get the image link that you crop to check if the crop image is correct. Please help me see. Thank you.

Avatar editor

 <Slider {...settingSlider}>
            {fileList.map((file, i) => (
              <div>
                <AvatarEditor
                  id={file.name}
                  ref={(el) => (editor.current[i] = el)}
                  image={file.previewUrl}
                  width={300}
                  height={300}
                  border={50}
                  color={[255, 255, 255, 0.6]}
                  scale={1}
                  rotate={0}
                  onMouseUp={() => onMouseUp(i)}
                  // onImageReady={onImageReady}
                  style={{ backgroundColor: "black" }}
                />
              </div>
            ))}
          </Slider>

UseRef()

 const editor = useRef([]);

OnMouseUp function

const onMouseUp = (i) => {
    if (editor) {
      const canvas = editor.current[i].getImage();
      const url = URL.createObjectURL(dataURItoBlob(canvas.toDataURL()));
      console.log(url);
    }
  };

Images

before crop after crop