Issue in sending binary image data (LONGBLOB in MySQL, Bytes in Prisma) to my front-end as a PNG

So, I have an issue with my Fullstack app, in which I have "images" in my "log" database stored as bytes that contains data to my PNG images in my database. I however cannot load them into my front-end.

My Prisma Schema (in my front end, all the data is under "logs" so log.Title etc to display the title in React)

model log {
  id Int @id
  Title String @db.VarChar(255)
  Content String @db.Text
  images Bytes
  date String @db.VarChar(255)
}

My front-end where I am displaying the data

const CoinIntelLogLayout = ({ log }) => {

  const imageArray = new Uint8Array(log.images);
  const blob = new Blob([imageArray], { type: "image/png" });
  const blobUrl = URL.createObjectURL(blob);

  return (
    <div className='flex flex-col justify-center items-center bg-whiteColor rounded-xl shadow-xl shadow-cyan-500/50 w-[400px] h-[400px]'>
  <div className='flex flex-col justify-center items-start gap-4 w-[350px]'>
    <div className='flex flex-col justify-center items-start' >
      <h2 className='bg-gradient-to-r from-purplebrownColor to-yellowColor bg-clip-text text-transparent font-jostSemiBold text-3xl pb-1'>{log.Title}</h2>
      <div className='bg-gradient-to-r from-purplebrownColor to-yellowColor h-1 w-[80%]'></div>
      <h2 className='bg-gradient-to-r from-purplebrownColor to-yellowColor bg-clip-text text-transparent font-generalSansRegular text-md pt-1'>{log.Date}</h2>
    </div>
    <h2 className='font-generalSansRegular text-md text-blackishColor'>{log.Content}</h2>
    <img className='h-11 w-auto' src={blobUrl} alt='Update Image' draggable={false}></img>
  </div>
</div>
  )
}

I tried to use blob to get this done, but it didn't work. I am not sure how to fix this, as passing in {log.images} into the image src does nothing.