If you goal is just to view the pdf in your application, the easiest way is using the object tag in HTML. You don't need to import any libraries and works most of the browsers. But this is lack of customization and styles.

  <object data="http://africau.edu/images/default/sample.pdf" type="application/pdf" width="100%" height="100%">
      <p>Alternative text - include a link <a href="http://africau.edu/images/default/sample.pdf">to the PDF!</a></p>
  </object>

Below solution works for me

• STEP 1: Enable CORS in your cloud provider where pdf file is uploaded. In my case It was AWS and I added this for the CORS config for the bucket.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "http://localhost:5173" // allowing this url to use GET
        ],
        "ExposeHeaders": []
    }
]

• STEP 2: Fetch the pdf and render like below.

const arrayBuffer = await fetch(YOUR_PDF_URL);
const blob = await arrayBuffer.blob();
const url = await blobToURL(blob);


// utils
function blobToURL(blob) {
   return new Promise((resolve) => {
      const reader = new FileReader();
      reader.readAsDataURL(blob);
      reader.onloadend = function () {
         const base64data = reader.result;
         resolve(base64data);
      };
   });
}

// use the url here
return  <Document renderMode="canvas" file={url}> ... 

You could use <iframe> to preview the PDF directly in your page, setting the src attribute to pdf_url. window.open(pdf_url) is also an option as mentioned above, but it'll require the user to have adblocker/pop-up blocker turned off.

In your render():

{pdf_url && <iframe src={pdf_url} />}

See MDN for multiple ways to display files