Загрузить изображение на элемент Canvas в React

Question

Я пытаюсь загрузить изображение на холст в React. Это код, который я использую для этого.

import React, { Component } from 'react';

class Image extends Component {
  constructor(props) {
    super(props);
    this.canvasRef = React.createRef();
  }

  componentDidMount() {
    const canvas = this.canvasRef.current;
    const context = canvas.getContext('2d');
    const image = new Image();

    image.onload = () => {
      context.drawImage(image, 0, 0)
    }

    image.src = 'http://lorempixel.com/400/200/sports/1/';

  };

  render() {
    return(
        <div>
          <canvas ref={this.canvasRef} width={2400} height={1200}/>
        </div>
    );
  }
}

export default Image

Все же я получаю пустую страницу всякий раз, когда я загружаю изображение. Я следовал за ответами из Как загрузить изображение на холст в React? , нарисовать изображение на холсте и Как мы можем загрузить локальное изображение на холст? . Кажется, что ни один из этих шагов не позволяет получить изображение на холсте. Единственный раз, когда я добился успеха, это следуя инструкциям в этом блоге https://blog.cloudboost.io/using-html5-canvas-with-react-ff7d93f5dc76, но мне кажется, что загрузка изображения дважды не обязательна, так как изображение должно быть загружено методом onLoad. Я также попытался переместить назначение image.src после метода onLoad и до того, как некоторые другие люди предложили в ссылочных вопросах SO, но оно не работает. В консоли также нет проблем.

Этот класс загружается в файл App.js, который затем запускается с использованием yarn start

import React from 'react';
import Image from './Image';

function App() {
  return (
    <div className="App">
        <Image/>
    </div>
  );
}

export default App;