Uncaught TypeError: Cannot read property 'width' of undefined at Cropper.zoomTo

I am using react-cropper version 2.0.0. I don't really understand the problem. It occurs in cropperjs zoomTo method. I have initialized the cropper instance on bootstrap modal. I see the cropper is initialized correctly and also show canvasData successfully but it still throws some error when it is parsing zoomTo function within cropperjs. It is unable to get the canvasData

Here's my react code

class CropperModal extends React.Component{

       constructor(){
        super(); 
        this.state={
         
            cropperInstance: '',
            sourceImage:'',
cropperSize: '',
          
            
        }
      
        this.onCropperInit = this.onCropperInit.bind(this);
     
    }        
    UNSAFE_componentWillReceiveProps(newProps){
         let image = new Image();
         image.src = newProps.originalImage;
         const _this = this;
         image.onload = function () {
            
             if (this.width <= this.height) {
                 _this.setState({
                     sourceImage: newProps.originalImage,
                     cropperSize: {
                         height: "100%",
                         width: "auto"
                     },
                 })
             } else {
                 _this.setState({
                     sourceImage: newProps.originalImage,
                     cropperSize: {
                         height: "auto",
                         width: "100%"
                     },    
                 })
             }
onCropperInit(cropper) {
        this.setState({
            cropperInstance: cropper    
        })
    
    console.log(cropper)
    }
        render(){
         
            return(
            
                    <Modal show={this.props.showModal} onHide={this.props.hideModal} dialogClassName="ModalSize" onEnter={this.props.onEnter}>
                    <Modal.Header closeButton>
                        Image adjustment
                    </Modal.Header>
                    <Modal.Body className="modalBodyHeight">
                        <Row>
                            <Col lg={6} className="cropperImage">
                               <Cropper  onInitialized={this.onCropperInit} src={this.state.sourceImage} style={{height: this.state.cropperSize.height,width: this.state.cropperSize.width}} aspectRatio="1.4" guides={true}  dragMode="move"  />
                            
                        </Col>
                            <Col lg={3}>
           
                                <div className="imgPreview"> 
                                </div>
                                
                                
                            </Col>
                           
                        </Row>  
                        </Modal.Body>
                   
                    </Modal>
                    
            )
        }
    }

export default CropperModal;