Как загрузить изображение в React JS?

Я пытаюсь создать средство просмотра изображений, которое имеет функциональность ** rotate and zoom in and zoom out **. Поэтому я беру холст для рисования изображения, но я думаю, что он не работает, тогда я прямо добавил свой URL-адрес image src (я знаю, что это не очень хороший подход) . Мне нужно нарисовать изображение с помощью холста, чтобы можно было вращать и масштабировать изображение. вот мой код https://codesandbox.io/s/6z651o698n

import React, { Component } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends Component {
  constructor() {
    super();
    this.state = {
      src:
        "https://img.timesnownews.com/story/1542606525-Sachin_Shaw.png?d=600x450"
    };
  }

  componentDidMount() {
    console.info("d");

    const canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var image = document.getElementById("image");
  }

  resetImage() {
    //load the  image in canvas if the image is loaded successfully
    const canvas = document.getElementById("canvas");
    const image = document.getElementById("image");
    const element = canvas.getContext("2d");
    const currentScale = Math.min(
      canvas.width / image.width,
      canvas.height / image.height
    );
  }
  clear() {
    const canvas = document.getElementById("canvas");
    const element = canvas.getContext("2d");
    element.clearRect(-2000, -2000, 5000, 5000);
  }
  drawImage() {
    const canvas = document.getElementById("canvas");
    const element = canvas.getContext("2d");
    clear();
    element.save();
    element.translate(canvas.width / 2, canvas.height / 2);
    element.translate(-canvas.width / 2, -canvas.height / 2);
    element.drawImage(
      image,
      canvas.width / 2 / currentScale - image.width / 2,
      canvas.height / 2 / currentScale - image.height / 2
    );
    element.restore();
  }
  zoomIn() {
    currentScale += 0.5;
    drawImage();
  }

  zoomIn() {
    currentScale -= 0.5;
    drawImage();
  }

  render() {
    console.info("r");
    return (
      <div>
        <button id = "zoomIn" onClick = {this.zoomIn}>
          {" "}
          Zoom In
        </button>
        <button id = "zoomIn" onClick = {this.zoomOut}>
          {" "}
          Zoom In
        </button>

        <canvas id = "canvas" height = "350" data-girar = "0">
          sdsd
        </canvas>
        <img id = "image" src = {this.state.src} />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

** может быть, я сделал много ошибок здесь, потому что я новичок в реакции ** в настоящее время zoom in and zoom out functionality not working