Muuri Inialization issue

Question

This is my html and JS code for muuri - it gives the following error

Uncaught Error: No valid child element found within item element. error at "dropzones"

I am not able to understand why I am facing this issue.

Can somebody study my code and figure out why i am encountering this error?

var boardGrid, dropzones;
var dropzonecontainer = [].slice.call(document.querySelectorAll('.drop-zone'));
var dropzonecon = document.querySelector('.drag-options-container');
dropzonecontainer.forEach(
  function(area) {
    var droparea = new Muuri(area, {
        dragEnabled: true,
        layoutEasing: true,
        dragContainer: dropzonecon,
        dragRelease: {
          useDragContainer: true,
        },
      })
      .on('dragReleaseEnd', function(item) {
        debugger
        if (itemDrag.targetGrid) {
          itemDrag.targetIndex = itemDrag.targetGrid.getItems().indexOf(item);
          var months = ["Jan", "Feb", "March", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec"];
          let [day, month, year] = itemDrag.targetGridID.replace(" 00:00:00", "").split('-');
          var dateObj = new Date(+year, +month - 1, +day);
          console.log(dateObj);
          $('.board-item[data-id=' + itemDrag.itemID + ']').find("#date_" + itemDrag.itemID).find("span").html("Due on: " + dateObj.getDate() + " " + months[dateObj.getMonth()] + " " + dateObj.getFullYear());
          UpdateServiceOrder(itemDrag);
          dropGrids.forEach(function(droparea) {
            droparea.refreshItems();
          });
        }
        setTimeout(function() {
          document.getElementById('drag-options').style.display = 'none';
        }, 3000);
      })
      //.on('layoutStart', function () {
      //    dropzones.refreshItems().layout();
      //})
      //.on('layoutEnd', () => {
      //    dropzones.layout();
      //})
      .on('receive', function(data) {
        itemDrag.targetGrid = data.toGrid;
        itemDrag.targetGridID = data.toGrid.getElement().getAttribute('data-id');
      });
    dropGrids.push(droparea);

  });
dropzones = new Muuri('.drag-options-container', {
  itemSelector: '.drop-zone',
  layoutDuration: 400,
  layoutEasing: 'ease',
  layoutOnResize: true,
  dragSortInterval: 0,
  dragReleaseDuration: 400,
  dragReleaseEasing: 'ease',
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/muuri/0.9.5/muuri.min.js" integrity="sha512-OcxD5yMkQtx7+ODJIvypN3ajf/fnpTK1I0+Gmq1O9W8uU16MfTmJ1nBNUJ84WuSBnJmoBSAmgm0ujUikVbRzfQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="drag-options-container" id="drag-options" style="display: none; position: fixed; overscroll-behavior:none;bottom: 20px; right: 20px;z-index: 99999;">
  <div class="drop-zone" style="border-top-color:red" data-id="delete">Delete</div>
  <div class="drop-zone" data-id="@DateTime.Today.AddDays(2).ToString(" dd-MM-yyyy ")">In Two Days</div>
  <div class="drop-zone" data-id="@nextMonday.ToString(" dd-MM-yyyy ")">Next Monday</div>
  <div class="drop-zone" data-id="@firstDayOfNextMonth.ToString(" dd-MM-yyyy ")">Next Month</div>
  <div class="drop-zone" style="border-top-color:green" data-id="complete">Done</div>
</div>