Displaying small canvas after resize

Im trying to learn react and has got into some problem I haven't been able to solve in 2 days.

I have upload an image and displaying it on the site. Works great. Now I want to crop it and display the cropped version. Does not work as expected.

It is displaying something in the canvas below, but not what I want.

Have searched the internet for a solution as said.

<ReactCrop 
    src={imgSrc} 
    crop={this.state.crop} 
    onImageLoaded = {this.handleImageLoaded}
    onComplete = {this.handleOnCropComplete}
    onChange={this.handleOnCropChange} />
    <br />
    <p>Preview canvas</p>
    <img src={this.imagePreviewCanvasRef} alt={this.imagePreviewCanvasRef} />

    <canvas ref={this.imagePreviewCanvasRef} width={1100} height={1100}></canvas>

</div>

<Dropzone onDrop={this.handleOnDrop}>
  {({getRootProps, getInputProps}) => (
    <section>
      <div {...getRootProps()} className='123123'>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
    </section>

  )}
</Dropzone>

I want to show the fully cropped file, but now I get a small canvas with the wrong part of the image cropped.