Can't click links on generated pdf

[jcarlo-vs]

Before you start - checklist

• [X] I followed instructions in documentation written for my React-PDF version
• [X] I have checked if this bug is not already reported
• [X] I have checked if an issue is not listed in Known issues
• [X] If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

'use client';

import { useContext, useState } from 'react'; import { Document, Page, pdfjs } from 'react-pdf'; import { DownloadIcon } from '@heroicons/react/outline'; import { ConfigurationContext } from '../contexts/configuration/context'; import { DEFAULT_TERMS_AND_CONDITIONS_PDF_URL } from '../constants'; import 'react-pdf/dist/esm/Page/AnnotationLayer.css'; import { LoadingDivComponent } from '../common-components/loading-div'; import { parseTextColor } from '../utils/colors'; import { ColorNames } from '../contexts/configuration/config';

pdfjs.GlobalWorkerOptions.workerSrc = new URL( 'pdfjs-dist/build/pdf.worker.min.js', import.meta.url ).toString();

export interface TermsAndConditionsStandaloneComponentProps { showHeader: boolean; headerName: string; }

export const TermsAndConditionsStandaloneComponent = ({ showHeader, headerName, }: TermsAndConditionsStandaloneComponentProps) => { const [pages, setPages] = useState(1); const [isLoading, setIsLoading] = useState(true); const [showDownloadButton, setShowDownloadButton] = useState(false); const [isError, setIsError] = useState(false);

const { configuration } = useContext(ConfigurationContext); const headerColor = configuration?.colorScheme?.headerColor as ColorNames; const pdfUrl = configuration.termsAndConditionsPdfUrl || DEFAULT_TERMS_AND_CONDITIONS_PDF_URL;

const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => { setShowDownloadButton(true); setPages(numPages); setIsLoading(false); setIsError(false); };

const loadError = () => { setIsLoading(false); setIsError(true); };

const renderPages = () => { const pdfPages = []; for (let i = 1; i <= pages; i++) { pdfPages.push( <Page key={i} pageNumber={i} scale={2} renderTextLayer={false} renderAnnotationLayer={true} className="mb-8" /> ); } console.log(pdfPages); return pdfPages; };

const handleDownloadPdf = () => { const link = document.createElement('a'); link.href = pdfUrl; link.download = 'TermsAndConditions.pdf'; link.target = '_blank'; document.body.appendChild(link); link.click(); document.body.removeChild(link); };

return ( <div className={ ${isError ? 'h-full' : 'h-[600px]'} overflow-y-auto} // style={{ width: '-webkit-fill-available' }} > <div className="p-4 flex flex-col text-center"> <h1 className={font-bold text-3xl text-center mb-8 ${ showHeader ? 'mt-32' : '' } ${parseTextColor(headerColor, 'text-gray-800')} } > {showHeader && headerName}

    <div
      className={`w-full mx-auto mb-10 relative max-w-screen-lg flex flex-col items-center`}
    >
      {showDownloadButton && (
        <div className="absolute top-2 left-2 bg-black bg-opacity-10 flex justify-center items-center">
          <button
            type="button"
            title="button"
            onClick={handleDownloadPdf}
            className="bg-primary text-white p-2 rounded cursor-pointer flex items-center z-50"
          >
            <DownloadIcon className="h-6 w-6" />
          </button>
        </div>
      )}
      {isLoading && <LoadingDivComponent />}
      <Document
        file={pdfUrl}
        onLoadSuccess={onDocumentLoadSuccess}
        onLoadError={loadError}
        noData=""
        loading={isLoading}
      >
        {renderPages()}
      </Document>
    </div>
  </div>
</div>

); };

Steps to reproduce

NA

Expected behavior

I expect that when I hover I see yellow overlay thing and clickable

Actual behavior

I don't see any yellow ,and the link is not clickable inside the pdf

Additional information

No response

Environment

• Browser (if applicable):
• React-PDF version:
• React version:
• Webpack version (if applicable):