Setting the crop area to be fixed in react-easy-crop

Question

So I wanted to add an image cropping functionality to my app in which the user can upload the image & crop the image (crop area is fixed , width:120px , height:30px ) . When i gave only the cropping feature feature with ("react-image-crop") the feature was working fine and images produced were always of ( width:120px , height:30px )

But , later for some reasons I had to change the library to "react-easy-crop" & give image zooming and rotating feature also .When i gave the cropSize={{height:30, width:120}} props to the Cropper the images produced were of different resolutions as the zooming changed. Ex. with cropSize={{height:30, width:120}} in props , image without zooming gave the image to 120 x 30px but on full zoom the imge produced was of 40 x 10px . Could someone please explain to me the change in the dimensions of the image produced , even when the crop size is fixed ? and also how could I produce the cropped images with the same dimensions (even after rotating and scaling the images) with react-easy-crop .(any hints would be appreciated )

This was the code that worked fine with the react-image-crop library.( WITHOUT zooming and rotating )

<ReactCrop
    src={imageToCrop}
    onImageLoaded={setImage}
    onChange={setCrop}
    maxWidth={120}
    maxHeight={30}
/>

The cropped images were always of 120 x 30 px .

The code with react-easy-crop was ( WITH zooming and rotating )

<Cropper
    image={Img}
    crop={crop}
    rotation={rotation}
    zoom={zoom}
    aspect={4}
    onCropChange={setCrop}
    onRotationChange={setRotation}
    onCropComplete={onCropComplete}
    onZoomChange={setZoom}
    cropSize={{ height: 30, width: 120 }}
/>

The images produced differed in their dimensions with the extent of zooming. (the aspect crop had no effect on the image. )