Downloading content in React shrinks the content... i need help understanding why

Question

So i have a react application that is fetching images, videos and other types of documents from storage in Cloudflare. I have set up a basic setup of downloading the content by creating a Blob object and then downloading the content. However, when its downloaded it is much smaller then the original. Can someone maybe help me undestand what is happening to the files?

//The download function
  const downloadFile = (e) => {
    e.preventDefault();
    const url = window.URL.createObjectURL(
      new Blob([content.attributes.media.data[0].attributes.url])
    );
    const link = document.createElement("a");
    link.href = url;
    link.setAttribute(
      "download",
      `${content.attributes.media.data[0].attributes.name}`
    );

    // Append to html link element page
    document.body.appendChild(link);

    // Start download
    link.click();

    // Clean up and remove the link
    link.parentNode.removeChild(link);
  };

//The download button
<PrimaryButton onClick={(e) => downloadFile(e)}>Download</PrimaryButton>

I have tried using different libraries as well to download the files, but it still comes out smaller then original.