Isotope filter isn't working, all items disappears when I click

I'm learning web development. Currently, I'm at the very beginning stage. Suddenly I'm facing a problem with 'isotope filter'. The filter isn't working. All my grid items are showing first. But whenever I clicked on another button all items disappear immediately. I was trying to filter all items into different sections under the different buttons. Maybe I was unable to explain my problem properly, still, can anyone help me to fix my problem?

var filter_btn = document.querySelectorAll(".filter-btn");

filter_btn.forEach((btn) => {
btn.addEventListener("click", () => {
  filter_btn.forEach((button) => button.classList.remove("active"));
  btn.classList.add("active");

  let filterValue = btn.dataset.filter;
  $(".grid").isotope({filter: filterValue});
});
});

$('.grid').isotope({
    itemSelector: '.grid-item',
    layoutMode: 'fitRows',
    transitionDuration: "0.6s"
  });