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;

I've visited Sanity IO's homepage and noticed their last release note. They mention that:

Version 5.0.0 of this library has removed support for the blur options.

But as I can see, you are already using their lqip version. They also offer a more advanced method which is the "blurHash" which I advise you to try out!

Since you've already checked the blurUrl is working correctly. I suspect that you missed something as small as the following possible cases:

1. Check your import statement: import Image from 'next/image';.
2. Check that you are correctly adding imageProps to your image.

const imageProps = useNextSanityImage(configuredSanityClient, mySanityData.image);

    return (
        <Img
            {...imageProps}
            style={{ width: '100%', height: 'auto' }} // layout="responsive" prior to Next 13.0.0
            sizes="(max-width: 800px) 100vw, 800px"
            placeholder="blur"
            blurDataURL={mySanityData.image.asset.metadata.lqip}
        />
    );