How to fetch pdf file and display it using react-pdf library

Question

I'm trying to fetch pdf file from my backend and display it on the page. I'm using react-pdf library https://www.npmjs.com/package/react-pdf . But I'm getting an error

Invalid parameter in file, need either Uint8Array, string or a parameter object

Could you please help me

import { Document, Page } from 'react-pdf';

<Document file={() => dispatch(downloadAgreement())}>
  <Page pageNumber={pageNumber} />
</Document>

export const downloadAgreement = () => (dispatch) => {
  return axios(`https://test-zdc/pdf`, {
     method: 'GET',
     responseType: 'blob' 
  }).then((res) => {
    const file = new Blob([res.data], { type: 'application/pdf' });
    const fileURL = URL.createObjectURL(file);
    return fileURL;
  });
};

Answer 1

It's not clear in the README what file expects, I think you need an object like

return {url: fileURL}

Answer 2

Could be too late, but it works fine for me

const [pdfResponse, setPdfResponse] = useState();

useEffect(() => {
    axios({
      method: 'GET',
      url: '/url_to_pdf',
      responseType: 'arraybuffer',
    })
    .then(response => setPdfResponse(response.data));
}, []);

return (
    <Document file={pdfResponse}>
        <Page pageNumber={1}>
    </Document>
);