Height in parent element not followed

I have the following code:

<Box width="100%" height="50vh">
    {validCrop ? <canvas ref={canvasRef} /> :
        <ReactCrop crop={crop} onChange={c => setCrop(c)}>
            <img alt="Highlight your cactus" src={imgSrc} />
        </ReactCrop>
    }
</Box>

Width is obeyed, but height is ignored. I expected the behaviour to be either that the image is warped to fit the size or, preferably, the lowest dimension is chosen to keep the aspect ratio of the image.

Am I doing anything wrong? Is this intended behaviour, and if so, is there any way to set the image size based on height?

[DominicTobias]

I see the issue, please upgrade to 10.0.0-beta.5 and try again

[DominicTobias]

Yep you’ll need to be aware of the size of the rendered image to set an initial crop here’s an example: https://github.com/DominicTobias/react-image-crop#how-can-i-center-the-crop