如何在React中绘制带有标题的线条？

import React, { Component } from 'react';

class LineWithLabel extends Component {
  constructor(props) {
    super(props);
    this.canvasRef = React.createRef();
    this.state = {
      title: 'My Line',
      lineColor: 'black',
      lineWidth: 2,
    };
  }

  componentDidMount() {
    window.addEventListener('resize', this.handleResize);
    this.draw();
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize);
  }

  handleResize = () => {
    this.draw();
  };

  draw = () => {
    const canvas = this.canvasRef.current;
    const ctx = canvas.getContext('2d');
    const { title, lineColor, lineWidth } = this.state;

    // Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw line
    ctx.beginPath();
    ctx.moveTo(50, 50);
    ctx.lineTo(250, 50);
    ctx.strokeStyle = lineColor;
    ctx.lineWidth = lineWidth;
    ctx.stroke();

    // Draw title
    ctx.font = '20px Arial';
    ctx.fillText(title, 50, 30);
  };

  render() {
    return <canvas ref={this.canvasRef} width={300} height={100} />;
  }
}

export default LineWithLabel;