Drag and drop of element is not working using Cypress.io

Question

I am dragging one text element from a tree to a drop zone. .After element get drooped will have a table displayed.No errors shown but the element is not getting dropped. Also when we do dragging manually ->we can see a bubble with green color until it get drooped.That also not got displayed. Note:both element identification is successful. I have gone through the issues mentioned on cypress.io channels but my issue is not same.

HTML for element to be dragged

   class="tree-item-content ng-binding ng-scope" ng-      if="!item.ui.search.html" ng-  bind="item.ItemName" ng-class="vm.itemStyle(item)" ng-dblclick="vm.treeDoubleClick ($event, item, itemParent)">Gender</

HTML for Drop Zone

 id="itl-drop-zone-down" class="dropArea" ng-class="{'itl-drop-zone-active': currentDropType === 'down' && dropZoneOptions.down && dropZoneOptions.down.options.length > 0, 'itl-highchart-down-drop-zone-height' : isHighchart || isWidthChart, 'itl-table-down-drop-zone-height':isVizGrid}" kendo-droptarget="" k-dragenter="onDragEnter" k-dragleave="onDragLeave" k-dragcancel="onDragLeave" k-drop="onDrop" droptype="down" data-role="droptarget">
    <span class="itl-drop-zone-header">Down</span>
    <!-- ngIf: !isInitialLayout() && displayOptions('down') -->

I tired below solution but not working

describe('Drag and drop of Gender test', function() {
const dataTransfer = new DataTransfer;

function dndIt() {
  cy.get('.tree-item-content').contains("Gender")
    .trigger('dragstart', { dataTransfer });

  cy.get('#itl-drop-zone-down')
    .trigger('drop', { dataTransfer });

  cy.get('.tree-item-content').contains("Gender")
    .trigger('dragend');               
}                                      

beforeEach(function() {
  cy.viewport(1000, 600);
  cy.visit('Paste your url ');
});

it('Check whether the drag and drop of Gender is possible', function() {
  dndIt();  
  cy.get('#itl-drop-zone-down')
    .should(($el) => {
      expect($el.children()).to.have.lengthOf(1)
    });
});

});