Droppable not working

[BilalMustafa-cs]

Hi @artf Hope you are doing fine
I'm working with GrapesJS to add components in Iframe and saving generated Html & Css for my working.

I have created a simple Row having two cells. i.e.

 ` comp = wrapperChildren.add({
  tagName: 'row',
  type: 'row',
  stylable: true,
  resizable: true,
  removable: true, // Can't remove it
  draggable: true, // Can't move it
  droppable: true,
  copyable: true,// Disable copy/past
  editable: false,
  contenteditable: true,
  components: [
    {
      type: 'Cell',
      resizable: false,
      editable: true,
      hoverable: true,
      draggable: false, // Can't move it
      selectable: false,
      droppable: true,
      style: { 'min-height': '75px', 'flex-grow': '1', 'flex-basis': '100%' },
    },
    {
      type: 'Cell',
      resizable: false,
      editable: true,
      hoverable: true,
      draggable: false, // Can't move it
      selectable: false,
      droppable: true,
      style: { 'min-height': '75px', 'flex-grow': '1', 'flex-basis': '100%' },
    },
  ],
  style: {
    'display': 'flex', 'justify-content': 'flex-start', 'align-items': 'stretch', 'flex-wrap': 'nowrap', 'padding': '10px'
  },

});`  

When i drop text field into this cell it's not going into cell.

My text element : -

`comp = wrapperChildren.add({
  tagName: 'div',
  type: 'text',
  stylable: true,
  resizable: true,
  removable: true, // Can't remove it
  draggable: true, // Can't move it
  copyable: true, // Disable copy/past
  contenteditable: true,
  droppable: '.cell',
  content: '<h1 class="col-12 menuHeading">' + menu.name + '</h1>',

  style: {
    position: 'absolute', 'padding': '10px', 'left': '500px', top: '250px', width: '250px', 'text-align': menu.align,
    'display': 'flex', 'flex-direction': 'row'
  },

});`

Here's my added scripts : -

Generated view : -

Any help would be highly appreciated.