How do you use LQIP & lazysizes (documentation misses some things)

[agcty]

Question

How do you actually implement a working LQIP image?

I've got the following code:

const previewURL = buildURL(
    `${process.env.NEXT_PUBLIC_IMGIX_URL}/${getImgixPathFromSignedUrl(
      template?.preview
    )}`,
    { q: 70 }
  );


 <Imgix
          className="object-contain mx-auto my-4 mb-8 rounded-lg shadow-lg lazyload"
          alt={template.name}
          src={previewURL}
          sizes="100vw"
          htmlAttributes={{ style: { maxHeight: "55vh" }, src: previewURL }}
          attributeConfig={{
            src: "data-src",
            srcSet: "data-srcset",
            sizes: "data-sizes",
          }}
        />

import lazysizes from "lazysizes";
import "lazysizes/plugins/attrchange/ls.attrchange";
import "lazysizes/plugins/blur-up/ls.blur-up";

lazysizes.cfg.blurupMode = "always";

Here's a video of the issue:

https://shareit.video/h6eP1jG4GNEr7vwroM5b

Basically it doesn't load the low res placeholder for whatever reason and what's more important the image doesn't even show up until after the component has rendered and I'm not sure why. Is there a working ( & recent) code sample anywhere?