How to render a blob?

Hello,
I try to create an issue panel that can display attachments. I fetch the attachment content from rest api and create a blob from it.

 const blob = base64toBlob(data, contentType);
const blobUrl = URL.createObjectURL(blob);

Then, using this url and an external library to view files, I do the following:

const docs = useMemo(() => {
        return [
            { uri: dataUrl }, // Remote file
        ];
    }, [dataUrl])
....
<DocViewer
                    documents={docs}
                    initialActiveDocument={docs[0]}
                    pluginRenderers={DocViewerRenderers}
                />

However, I got the following error:
Refused to connect to ‘blob:https://584ote-1v0pid7jxs-12rh8wy1l0--12tsb2o-22g26hz7xk-2ns6ihetdq.cdn.prod.atlassian-dev.net/e35faa34-2d21-45bb-a31a-bb60311a124a’ because it violates the document’s Content Security Policy.
How can I solve this? Is there anyone who tried to achieve a similar task?
Thanks for your time in advance.
Necla