Masonry.js unusual behavior after hide() in jquery filter

Question

I am bulding a project in laravel. I built a Masonry layout following this documentation of Masonry.

The layout looks likes this:

This is the code for the layout:

HTML:

<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>

CSS:

  .grid-item img {
    width: 100%;
    font-size: 0;
  }

  .grid-item {
    width: 100%;
  }

  @media (min-width: 768px) {
    .grid-item {
      width: 33.333%;
    }
  }

I created a filter that displays only the rooms that are checked, but it is not working as I intended. It does filter the rooms correctly, but it doesn´t show the images in the correct layout.

This is the filter:

HTML:

<div class="modal-backdrop-filters"></div>
        <div id="mySidenav" class="sidenav">
            <div class="top-header-filters">
                <h3 class="title-filters">FILTERS</h3>
                <a id="closebtn" class="closebtn filter-close-btn">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                    style="border: none; background-color: #fff;">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </a>
            </div>
            <div class="header-filters">
                <h4 class="title-filters">Categories</h4>
            </div>
            <div class="round" id="r-group">
                <form>
                    <label class="label-filter" style="margin-top: 3rem;"><input type="checkbox" name="room" value="office"><span class="label-text"> Office</span></label><br>
                    <label class="label-filter"><input type="checkbox" name="room" value="bedroom"/><span class="label-text">Bedroom</span></label><br>
                    <label class="label-filter"><input type="checkbox" name="room" value="living-room"/><span class="label-text">Living Room</span></label><br>
                    <label class="label-filter"><input type="checkbox" name="room" value="dining-room"/><span class="label-text">Dining Room</span></label><br>
                    <label class="label-filter"><input type="checkbox" name="room" value="library"/><span class="label-text">Library</span></label><br>
                    <label class="label-filter"><input type="checkbox" name="room" value="hallway"/><span class="label-text">Hallway</span></label><br>
                    <label class="label-filter"><input type="checkbox" name="room" value="kitchen"/><span class="label-text">Kitchen</span></label><br>
                    <label class="label-filter"><input type="checkbox" name="room" value="bar"/><span class="label-text">Bar</span></label><br>
                    <label class="label-filter"><input type="checkbox" name="room" value="entryway"/><span class="label-text">Entryway</span></label><br>
                </form>
              </div>
            <button id="applyBtn" class="apply-filters-btn">APPLY</button>
        </div>
    </div>

EDIT

I have changed the script for the filter, and now something really unusual is happening. All of the images are now displayed in the left column of the page EXCEPT when the first image in the top left of the website is selected, then the layout behaves as I intended, with images displayed in horizontal order.

Behavior when the top left image is not selected: Images are placed vertically, as you can see below.

Behavior when the top left image is selected in the filter: images are placed horizontally.

This is the script for the filter:

$(function(){
        $('form').find("input").on('change',function(){
            let selected = [];
            $('form').find("input").each(function(){
                if(jQuery(this).is(":checked")){
                selected.push(jQuery(this).val());
                }
            })
            if(!selected.length){
                $(".products-by-room > div").show();
                $(".grid").masonry();
                $('.grid').show();
                return;
            }
            $(".products-by-room > div").hide();
            $(".grid").masonry();
            $(".products-by-room > div").each(function(){
                const category = jQuery(this).attr('data-category');
                const categorySplitted = category.split(' ');
                categorySplitted.forEach((cat)=>{
                if(selected.indexOf(cat) !== -1){
                jQuery(this).show();
                }
                });
            });
            $(".grid").masonry();
        });
    });

Why is this happening? Doesn´t make any sense to me.