Hydrogen image placeholder

[carstensbix]

How do i render a placeholder while my image renders on the frontend?

This won't render the placeholder, while the image renders on the client browser.

           import {Image} from '@shopify/hydrogen';

           <Image
                aspectRatio="1/1"
                placeholder="https://placehold.co/1024x1024/png"
                data={{
                  url: img.url,
                }}
                onLoad={() => {
                  setImageLoading(false);
                }}
                className="rounded transition-[border-radius] duration-500 ease-out group-hover:rounded-xl"
              />