MiniMasonry the items are stacking on top of each other

Question

I used MiniMasonry on my items, but they are stacking on top of each other. Why is this happening?

Please Picture below https://prnt.sc/N5ISAEzVMura

I have tried for a long time. I want to know where this problem is and what is the solution

import { useEffect, useState, useRef } from 'react';
const containerRef = useRef();

useEffect(() => {
    if (containerRef.current?.classList.contains('masonry') && feedLayoutStyle === "masonry") {
        var masonayrObj = new MiniMasonry({
            container: containerRef.current,
            gutterX: 40,
            gutterY: 40,
            minify: false,
            ultimateGutter: 5,
            surroundingGutter: true
        });
        setMiniMasonry(masonayrObj);
    } else {
        miniMasonry?.destroy();
    }
}, [feedLayoutStyle]);

<div ref={containerRef} >
  <div className="Single_item"> 
    <div className="img">
     <img src={userInfo?.avatar_url} alt="" />
    </div>
  </div>
</div>