Pdf blob url in iframe is not loading on Mobile and Tablets but works fine on all major desktop browsers

Question

So I have a url of a pdf which I have to display in the UI for my React application

The pdf url looks something like this

const pdfURL = `${config.apiUrl}/v1/resumes/${profile.key}/pdf`;

On setting src on the iframe equals to this url throws x-frame-options error in the console and was not loading the pdf

So I had to fetch the pdf file by making an api call and creating object URL out of it

const fetchPdfContent = async () => {
    const state = getState();
    try {
      setIsLoading(true);
      const response = await fetch(pdfURL, {
        method: 'GET',
        headers: {
          // ... pass access token here
        },
      });
      const blob = await response.blob();
      const src = URL.createObjectURL(new Blob([blob], { type: 'application/pdf' }));
      setPdfContent(src);
    } catch (error) {
      // show notification with error message
    } finally {
      setIsLoading(false);
    }
  };

And then set pdfContent in the src of the iframe

  <iframe
    title={caption}
    src={`${pdfContent}#toolbar=0`}
  />

Everything work fines with this approach on all major desktop Browsers This is how it looks on the UI for desktop browsers

But the same pdf blob url does not load for any of the browsers on mobile and tablets and there is no error in the console

I have been looking for the solutions over the internet but unable to find one. I found the similar question but it is of no use.

And because of some limitations at the Backend I am not able to use any custom package for rendering pdfs and is stuck with iframe

Any help would be highly appreciated.