Отображение небольшого холста после изменения размера

Question

Я пытаюсь научиться реагировать и столкнулся с проблемой, которую не смог решить за 2 дня.

Я загружаю изображение и показываю его на сайте. Работает отлично. Теперь я хочу обрезать его и отобразить обрезанную версию. Не работает должным образом.

На холсте ниже отображается что-то, но не то, что я хочу.

Ищите в интернете решение, как сказано.

<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>

Я хочу показать полностью обрезанный файл, но теперь я получаю небольшой холст с обрезанной неправильной частью изображения.