PDF Text Select React

import React, { useEffect, useState, useRef, useCallback } from "react";
import { createPortal } from "react-dom";
import * as PDFJS from "pdfjs-dist/build/pdf";
import PDFJSWORKER from "pdfjs-dist/build/pdf.worker.entry";
import "./misc/textLayer";
import "./misc/textLayer.css";

window.PDFJS = PDFJS;

export default function PdfViewer({ url }) {
  const canvasRef = useRef();
  const containerRef = useRef(null);

  const pdfUrl =
    "https://uploads.codesandbox.io/uploads/user/faa4155a-f802-458d-81ad-90b4709d0cf8/4ETB-10.1.1.324.5566.pdf";

  PDFJS.GlobalWorkerOptions.workerSrc = PDFJSWORKER;
  const [pdfRef, setPdfRef] = useState();
  const [currentPage, setCurrentPage] = useState(1);
  console.log(currentPage);
  const renderPage = useCallback(
    (pageNum, pdf = pdfRef) => {
      pdf &&
        pdf.getPage(pageNum).then(function (page) {
          const viewport = page.getViewport({ scale: 1.8 });
          const canvas = canvasRef.current;
          canvas.height = viewport.height;
          canvas.width = viewport.width;
          const renderContext = {
            canvasContext: canvas.getContext("2d"),
            viewport: viewport
          };
          page.render(renderContext).promise.then(function () {
            page.getTextContent().then(function (textContent) {
              // clearning previous text-layers
              containerRef.innerHTML = "";

              containerRef.current.setAttribute("class", "textLayer");
              containerRef.current.style.height = `${viewport.height}px`;
              containerRef.current.style.width = `${viewport.width}px`;

              const textLayer = new window.TextLayerBuilder({
                textLayerDiv: containerRef.current,
                pageIndex: page.pageIndex,
                viewport: viewport
              });

              textLayer.setTextContent(textContent);

              textLayer.render();
            });
          });
        });
    },
    [pdfRef]
  );

  useEffect(() => {
    renderPage(currentPage, pdfRef);
  }, [pdfRef, currentPage, renderPage]);

  useEffect(() => {
    const loadingTask = PDFJS.getDocument(pdfUrl);
    loadingTask.promise.then(
      (loadedPdf) => {
        setPdfRef(loadedPdf);
        for (let i = 1; i <= loadedPdf.numPages; i++) {
          // Get desired page
          loadedPdf.getPage(i).then(function (page) {
            const scale = 1.5;
            const viewport = page.getViewport(scale);
            const div = document.createElement("div");

            div.setAttribute("id", "page-" + (page.pageIndex + 1));
            div.setAttribute("style", "position: relative");
            createPortal(document.getElementById("container"), div);
            const canvas = document.createElement("canvas");
            div.appendChild(canvas);

            const context = canvas.getContext("2d");
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            const renderContext = {
              canvasContext: context,
              viewport: viewport
            };

            // Render PDF page
            // page.render(renderContext);
          });
        }
      }
      // function (reason) {
      //   console.error(reason);
      // }
    );
  }, [url]);

  window.addEventListener("selectionchange", (e) => {
    console.log(e);
  });

  const nextPage = () =>
    pdfRef && currentPage < pdfRef.numPages && setCurrentPage(currentPage + 1);

  const prevPage = () => currentPage > 1 && setCurrentPage(currentPage - 1);

  return (
    <div className="view">
      <div>
        <canvas ref={canvasRef} />
        <div ref={containerRef} />
      </div>
      <button onClick={prevPage}>Prev</button>
      <button onClick={nextPage}>Next</button>
    </div>
  );
}