I'm working on a project that lets the user sign a pdf using React. Right now I'm displaying the pdf on an Iframe component and would like to let the user place a rectangle on the pdf that shows where would he want the sign to be displayed.

Is there any way for me to let the user "draw" that rectangle in the displayed pdf?

Right now my component looks like this:

import { PDFDocument } from "pdf-lib";
// import useffect
import { useState, useEffect } from "react";
const PDFRenderer = (props) => {
const { data } = props;
const [docurl, pdfBytes] = data;
const [sizes, setSizes] = useState(null);
useEffect(() => {
  async function getSizes() {
  const pdfDoc = await PDFDocument.load(pdfBytes);
  const pages = pdfDoc.getPages();
  const page = pages[0];
  const { width, height } = page.getSize();
  setSizes([width, height]);
}
  getSizes();
}, [pdfBytes]);
return (
  <div className="renderer">
    {sizes && (
      <iframe
        src={docurl + "#zoom=100"}
        width={sizes[0] * 1.5}
        height={sizes[1]}
      />
    )}
  </div>
);
};