I can't draw rectangle using canvas as child component

I need to draw a rectangle using canvas. Canvas must be in child component. Just like the updateCanvas function. Is it possible to do so?

I am trying to draw a rectangle in the parent component and everything works fine, but in this case I need to put the canvas in the child component.

// Parent Component

import React, { Component } from "react";
import PropTypes from "prop-types";
import Shape from "../../components/Shape";
import "./groupShapes.css";
export default class GroupShapes extends Component {
  constructor(props) {
    super(props);
    // this.state = {
    //   reactanglesOptions: [0, 1, 2]
    // };
    this.canvas = React.createRef();
  }
  componentDidMount() {
    this.updateCanvas();
  }

  updateCanvas = () => {
    const ctx = this.canvas.getContext("2d");
    ctx.fillRect(0, 0, 100, 100);
  };

  render() {
    // const { reactanglesOptions } = this.state;
    return (
      <div className="groupContainer">
        <Shape ref={this.canvas} />
      </div>
    );
  }

  static propTypes = {
    prop: PropTypes
  };
}

// Child Component
import React, { Component } from "react";

export default class Shape extends Component {
  render() {
    const { ref } = this.props;
    return (
      <div>
        <canvas ref={ref} width={300} height={300} />
      </div>
    );
  }
}

expected results. drawn rectangle.