when load a cropped image, there is a strange crop range projection on the image

[LuckyLuo]

react-image-crop package version: "^11.0.6"

We use canvas to draw an image and feed it into ReactCrop, and with initial percent crop data from last saved crop.

<ReactCrop
            minWidth={5}
            minHeight={5}
            crop={percentCrop}
            onChange={(_, _percentCrop) => {
              setPercentCrop(_percentCrop);
            }}
            keepSelection
          >
            <canvas ref={previewCanvasRef} aria-label="transform preview" className={classes.imageCanvas} />
</ReactCrop>

Issue:
There is a strange crop range projection on the image. See the picture below:

When start to drag the crop selection, then that strange crop range projection is gone. See the picture below:

But after the cropping, when you re-open the image with cropped data again, the strange crop range projection shows up again.
Can you please help me to identify how to get rid of this strange crop range projection? Is it a style issue somewhere when displaying the canvas-drawn image inside ReactCrop? Thanks

[LuckyLuo]

Found a workaround here: #579 (comment)

Remove default crop value const [crop, setCrop] = useState();
Instead, do it on imageLoad with setCrop({ ... })