Masonry using ajax resize

I m working on a responsive site using masonry to show pictures . The grid container is fill with Pictures ( items ) called from an ajax function : item fill from ajax this working well untill i resize for exemple for cell phone . i have an error from masonry.js output console : masonry.pkgd.min.js:9 Uncaught RangeError: Invalid array length
at Array.push
the line refer to

function(t) {
"use strict";
function e(t, e) {
    var n = t.create("masonry");
    return n.prototype._resetLayout = function() {
        this.getSize(),
        this._getMeasurement("columnWidth", "outerWidth"),
        this._getMeasurement("gutter", "outerWidth"),
        this.measureColumns();
        var t = this.cols;
        for (this.colYs = []; t--; )
            this.colYs.push(0);
        console.log(this.colYs);
        this.maxY = 0
    }   

excalty there ==> this.colYs.push(0);
My function to call item and resize

    function sendFormData() {
const postData = new FormData();

// Add all selected conditions to FormData
for (const [key, value] of Object.entries(selectedConditions)) {
    console.log("Adding to FormData:", key, value); // Debugging log
    if (Array.isArray(value)) {
        value.forEach(val => postData.append(key, val)); // If it's an array (checkboxes)
    } else {
        postData.append(key, value); // If it's a single value (radio or text input)
    }
}

fetch(BASEURL + '/search_ajax.php', {
    method: 'POST',
    body: postData
})
.then(response => response.text()) // Read response as text
.then(text => {
    console.log('Raw Response:', text);
    const grid = document.getElementById('grid');
    grid.innerHTML = text;

    new AnimOnScroll(grid, {
        minDuration: 0.4, 
        maxDuration: 0.7,
        viewportFactor: 0.2 
    });

    // Ensure imagesLoaded only triggers after all images are loaded
    imagesLoaded(grid, function() {
        masonryInstance.reloadItems();
        masonryInstance.layout();
    });
})
.catch(error => {
    console.error('Error:', error);
});

}

let resizeTimeout;

window.addEventListener(‘resize’, function() {
// Clear the existing timeout to avoid multiple layout recalculations
clearTimeout(resizeTimeout);`

// Set a new timeout to delay the layout recalculation
resizeTimeout = setTimeout(function() {
    if (masonryInstance) {
        masonryInstance.layout(); 
    }
}, 100); // Adjust the timeout duration as needed (in milliseconds)

});

here the masonry ini `window.addEventListener(“load”, function() {
const grid = document.getElementById(“grid”);
masonryInstance = new Masonry(grid, {
itemSelector: “.grid-item”,
gutter: 20,
transitionDuration: “2ms”,
isFitWidth: true,

    });
    console.log("Masonry initialized using plain JavaScript");
});  

i inserted a console to watch this.colYs.push(0);
console.log(this.colYs) , the array is fine when you called item (3) [0, 0, 0] 0 : 281.375 1 : 334.5 2 : 182.703 length : 3 you have the number of column etc… but when during resizing i have a length absolutely random and which corresponds to nothing ( 56 colum , 65 column… ) . i tried to get information from the website . if someone can help me . thank you