Media not getting rendered using @atlaskit/renderer

Hi there,

I am using Renderer from @atlaskit to display content from a confluence space in my react app using the adf data I receive via Confluence rest api.

Here is the code for my renderer:

const DocComponent = React.forwardRef(({ document }, ref) => {  
/** Hacky soln. to make anchor tags work :( */  
const extensionHandlers = {
    "com.atlassian.confluence.macro.core": (ext) => {
      const { extensionKey } = ext;
      console.log("ext: ", ext);
      switch (extensionKey) {
        case "anchor":
          return (
            <span id={`${ext.parameters.macroParams[""].value}`} />
          );
        default:
          return null;
      }
    },
  };
  return (
    <SmartCardProvider client={new Client("production")}>
      <ReactRenderer
        document={document}
        innerRef={ref}
        allowHeadingAnchorLinks
        appearance="mobile"
        shouldOpenMediaViewer
        extensionHandlers={extensionHandlers}
        eventHandlers={{
          smartCard: {
            onClick: (e, url) => {
              window.open(url, "_blank");
            },
          },
        }}
      />
    </SmartCardProvider>
  );
});

export default DocComponent;

Unfortunately, this is not able to load images on my react app.
This is the adf content response from REST api:

Images like the one in yellow (with ext link) are rendered by renderer.
Images like the one in red (stored in a collection by confluence) are not rendered by renderer.
Is there a way to render such images?
Usually apis like api.private.atlassian.com.XXX fails and images/other media/ macros fail to load.

I guess this might be an issue with auth.

Can someone help with this? Or suggest corrective steps?
Any help would be sincerely appreciated!
cc: @bentley , @zzarcon

Thanks,
Dan