View a document on the webpage, and have an acknowledgement button for it

Question

So I am trying to have a few documents displayed on the webpage, which the user should read and acknowledge. Only once the the documents are acknowledged, the User can click submit

Here's what I've tried so far with regards to displaying the document, the rest of the code for the webpage works fine, so I didnt upload the code on here for ease of understanding

<div>
          <h3>Document</h3>
          <Document
            file={process.env.PUBLIC_URL + '/Docs/test.pdf'} // Specify the path to your PDF document
            onLoadSuccess={onDocumentLoadSuccess}
          >
            <Page pageNumber={pageNumber} />
          </Document>
          {!userData.documentAcknowledged && (
            <button type="button" onClick={handleDocumentAcknowledgement}>
              Acknowledge Document
            </button>
          )}
        </div>  

Where onLoadSuccess and others are defined as follows

const handleDocumentAcknowledgement = () => {
    setUserData({ ...userData, documentAcknowledged: true });
  };

  const onDocumentLoadSuccess = ({ numPages }) => {
    setNumPages(numPages);
  };

  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);

When executing this part of the code, sometimes it works, but the document fails to load to load on the webpage (It shows failed to load document on the webpage where the document is to be displayed)

And sometimes it breaks the whole webpage and displays this error on the local host

Uncaught SyntaxError: Unexpected token '<' at handleError (http://localhost:3000/static/js/bundle.js:76476:58)

I am not sure where I am going wrong, and why the error pops up. Any help would be appreciated