NextJS 14 blured images with sanity io

I am trying to acheive blured lqip images on initial render. Then the real image loading in on top, all from sanity io.

However, the code below doesent seem to work, console logging the blurUrl does show the base 64 string.

I have tested on slow 3g and the images do not start from blured.

Any ideas?

const Header = ({ height = 'h-[420px]', title, className, image, tag = 'Flights' }: props) => {

  const imageUrl = urlFor(image).width(2000).height(400).dpr(2).quality(100).url() || 
  const blurUrl = image?.asset?.metadata?.lqip || ''

    return (
    <section
      className={`relative w-screen h-[150px] sm:h-[300px] ${className} z-0 bg-slate-5`}
    >
      <Image
        priority
        src={imageUrl || ''}
        blurDataURL={blurUrl}
        fill
        alt="hero image example"
      />
    </section>
  );
};

export default Header;

https://blog.olivierlarose.com/articles/placeholder-guide-using-next-image < this is an amazing guide, got the code working follow this. My working example:

import { urlFor } from "@/lib/sanity";
import Image from "next/image";
import { getPlaiceholder } from "plaiceholder";

const ServiceCard = async ({ heading, url, description, category, image }: ServiceCard) => {

  const imageUrl = image && urlFor(image).width(400).height(400).dpr(2).quality(100).url()
  
  const src = imageUrl;

  const buffer = await fetch(src).then( async (res) => {
      return Buffer.from(await res.arrayBuffer());
  })

  const { base64 } = await getPlaiceholder(buffer);

  return (
   
        <Image 
          className="object-cover w-full h-full rounded-none transition-transform duration-300 ease-in-out group-hover:scale-110"
          width={440}
          height={440}
          src={src || ''}
          placeholder="blur"
          blurDataURL={base64}
          alt=""
        />
  )
}

export default ServiceCard