Highlight specific area (using bbox coordinates) for a pdf page

[Swejal08]

I am rendering a pdf having few pages. The code looks like :

    <Document
        ref={documentRef}
        loading={PDFLoading}
        file={file}
        onLoadSuccess={onDocumentLoadSuccess}
        onLoadError={(e) => {
          handleError(e);
        }}
        error={PDF_ERROR}
      >
        {Array.from(new Array(numPages), (_index, pageNumber) => (
          <div
            key={`page-container_${pageNumber + 1}`}
            ref={(el) => {
              if (el !== null) {
                pageRefs.current.set(pageNumber + 1, el);
              }
            }}
          >
            <PageWithObserver
              key={`page_${pageNumber + 1}`}
              pageNumber={pageNumber + 1}
              scale={scale}
              // onRenderSuccess={onRenderSuccess}
              // canvasRef={canvas}
              customTextRenderer={performSearch}
              loading={PDFLoading}
              setPageVisibility={setPageVisibility}
              width={480}
            ></PageWithObserver>
          </div>
        ))}
      </Document>

PageWithObserver is just a wrapper that wraps Page component.

const PageWithObserver = ({
  pageNumber,
  setPageVisibility,
  ...otherProps
}: PageWithObserverProps) => {
  const [page, setPage] = useState<HTMLElement | null>(null);

  const onIntersectionChange = useCallback(
    ([entry]: IntersectionObserverEntry[]) => {
      setPageVisibility(pageNumber ?? 1, entry.isIntersecting);
    },
    [pageNumber, setPageVisibility]
  );

  useIntersectionObserver(page, observerConfig, onIntersectionChange);

  return (
    <Page 
    canvasRef={setPage}
    pageNumber={pageNumber}
    {...otherProps}
   />
  )

The use of observer is just to track page number when we scroll the pdf

How do I highlight a specific area (using coordinates) within a page ?