I'm using Syncfusion Tab to display multiple types of files based on tabs. One of the file types I want to display is the PDF type. Unfortunately, unlike all the other types I've tried to display, this type of file is kind of blocking me.

I'm using react-pdf (I don't want to use anything else) to display the PDF and load the file when the correct tab is selected. If we switch tabs, the files are cleared. I use useQuery to send a request to the server and get the file from the database. I can print the file in the console, but for some reason, in the tab component, react-pdf is stuck in loading state.

I tried replicating the same thing using just the react-pdf component and a button that calls useQuery to retrieve the file, and it works fine, the PDF is displayed, but not in the tab component.

My code is as follows:

Use query:

const { status, data, error, isFetching, refetch } = useQuery(['facture', id], async () => {
     const data = await getUniqueCassandraFile(id)
     setFile(data.rows[0].file)
     return data.rows[0].file
}, {
     enabled: false,
     refetchOnWindowFocus: false
})

The renderPdf function is in another file, as well as other render functions based on type. The file parameter is the state of the parent component, which is updated by the useQuery result (in the parent component). The query is re-fetched every time a new tab is selected (selection event):

export const renderPdf = (id, file) => {
    if(!file){
        return waiting(id)
    }
    return (
        <div key={id} className='file_container'>
            <Document file={`data:application/pdf;base64,${file}`} style={{height:50+'vh'}}>
                <Page size="A4" pageNumber={1} className="pdfFacture">
                </Page>
            </Document>
        </div>
    )
}

Tab component:

<div className="control-section tab-control-section">
   {chosenItem === -1 ? emptyDiv : 
   <TabComponent overflowMode="Scrollable" id="defaultTab" selecting={selecting} 
   selectedItem={chosenItem}>
      <TabItemsDirective>
      {
         header.map((item, index) => {
            return <TabItemDirective presentation={true} key={index} header={item} 
               content={{
                  template: tabContent, 
                  data: {content: content[index], type: item.type, id: item.id}}}/>
               })
            }
            </TabItemsDirective>
         </TabComponent>
      }
 </div>

And the TabContent template used to create each tab:

const tabContent = (data) => {
   return <div dangerouslySetInnerHTML={{__html: ReactDOMServer.renderToStaticMarkup(
             isFetching ? emptyDiv :
             switchRender(data.id, data.type, file))}}>
   </div>;
};