Masonry.js unusual behavior only fixed after refreshing the page

Question

This is a project built with laravel. I am using this plugin.

It allows me to build this layout:

This is the order in which the images are being placed:

It´s build with images being inserted directly from the database:

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
    <div class="grid products-by-room" data-masonry='{ "itemSelector": ".grid-item"}' style="margin-top: 8rem">
        @foreach ($rooms as $room)
           <div class="grid-item" data-category="{{ $room->data_category}}" style="border: 7px solid #fff">
               <a href="#zoomImg{{ $room->id }}" data-bs-toggle="modal" data-bs-target="#zoomImg{{ $room->id }}">
                   <div class="img-wrapper">
                       <img src="{{ $room->img }}" alt="" class="img-fluid shade">
                           <div class="overlay">
                           <i class="fa fa-search-plus icon"></i>
                       </div>
                   </div>
               </a>
               <div class="text-left mt-3 mb-5">
                   <p class="product-subtitle">{{ $room->name }}</p>
                   <h4 class="product-title">Shop the Look</h4>
                   <a class="product-price-link" href="#getPriceByRoom{{ $room->id }}" data-bs-toggle="modal" data-bs-target="#getPriceByRoom{{ $room->id }}">get price</a>
               </div>
           </div>
       @endforeach
    </div>

Sometimes this happens and it is fixed after refreshing the page:

Any ideas on how to avoid this behaviour?