Ограничивающая рамка в изображении с использованием reactjs

Question

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

Код реакции:

      import React, { useRef, useEffect } from 'react';
 


import 'bootstrap/dist/css/bootstrap.min.css';



function App() {
  const canvas = useRef();
  let ctx = null;
 
  // initialize the canvas context
  useEffect(() => {
    // dynamically assign the width and height to canvas
    const canvasEle = canvas.current;
    canvasEle.width = canvasEle.clientWidth;
    canvasEle.height = canvasEle.clientHeight;
 
    // get context of the canvas
    ctx = canvasEle.getContext("2d");
  }, []);
 
  useEffect(() => {
    const r1Info = { x: 20, y: 30, w: 150, h: 100 };
    const r1Style = { borderColor: 'red', borderWidth: 10 };
    drawRect(r1Info, r1Style);
    const r4Info = { x: 100, y: 220, w: 100, h: 50 };
    drawFillRect(r4Info);
  }, []);
 
  // draw rectangle
  const drawRect = (info, style = {}) => {
    const { x, y, w, h } = info;
    const { borderColor = 'black', borderWidth = 1 } = style;
 
    ctx.beginPath();
    ctx.strokeStyle = borderColor;
    ctx.lineWidth = borderWidth;
    ctx.rect(x, y, w, h);
    ctx.stroke();
  }
 
  
  
 
  return (
    <div className="App">
      


<div id="box-search">
      <div class="thumbnail text-center">
          <img src="https://karthiknbucket1.s3.ap-southeast-1.amazonaws.com/cat.jpg" alt="" />
          <div class="caption">
          <canvas ref={canvas}></canvas>
          </div>
      </div>
  </div>



    </div>
    
  );
}
 
export default App;

в настоящее время изображение и поле показаны отдельно, я хочу добавить ограничивающую рамку поверх изображения, любезно подскажите мне, как это сделать, любая помощь будет очень признательна