Estoy trabajando en un proyecto que le permite al usuario firmar un pdf usando React. En este momento, estoy mostrando el pdf en un componente Iframe y me gustaría permitir que el usuario coloque un rectángulo en el pdf que muestre dónde desea que se muestre el letrero.

¿Hay alguna forma de permitir que el usuario "dibuje" ese rectángulo en el pdf que se muestra?

En este momento mi componente se ve así:

 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> ); };