Loading 100 images load as tiles, loading 30 load as masonry.

[MeaningOfLights]

Hi,

I have a page with 100 images yet the top images load as tiles:

Looking at the first images' dimension you can see its clearly not a square tile:

When I load a page with 30 or so images the top images load as masonry:

This is my code and despite using a <LazyLoadImage it renders the same with an <img tag. This however brings up an issue where masonry needs to trigger resizes when new images are loaded.

<Masonry
	breakpointCols={breakpointColumnsObj}
	className="my-masonry-grid"
	columnClassName="my-masonry-grid_column"
	>
	{data.map((e, index) => (
	  <div key={index} onClick={() => { 
		setIsOpen(true); 
		setPhotoIndex(index); 
		}}>
		<LazyLoadImage
		  //ref={el => imageRefs.current[index] = el}
                  //onLoad={handleImageLoad}
		  src={`/flyers/${params.year}/FlyersPage/${e.image}`}
		  onError={(e) => {
			e.target.onerror = null;
			e.target.src = "https://d1jk10eqart6ca.cloudfront.net/flyers/1990/FlyersPage/Unknown.webp";
		  }}
		  loading="lazy"
		  alt=""
		  style={{ width: '100%', cursor: 'pointer' }}
		/>
	  </div>
	))}
	</Masonry>

I've tried various methods to trigger resizes, just they dont work on the initial top images loaded, they're all square tiles yet when I scroll down the page the images that get dynamically loaded are rendered as masonry.

const imageRefs = useRef([]);

  const handleLayoutToggle = () => {
    setUseMasonry(!useMasonry);
  };

  const handleImageLoad = () => {
    // Trigger Masonry re-layout after each image is loaded
    window.dispatchEvent(new Event('resize'));
  };

  useEffect(() => {
    imageRefs.current = imageRefs.current.slice(0, data.length);
  }, [data]);


  const breakpointColumnsObj = {
    default: 4,
    1100: 3,
    700: 2,
    500: 1,
  };

How can I make the top images honour the masonry? Thanks