Ember-Drag-Sort: Usage of "handle" selector results in dragEnd params being passed undefined

Whenever I assign a class selector to the "handle" selector and drag, all the params being passed to the DragEndAction are undefined my code below

    = drag-sort-list [
                items=sortedSections
                group='sections'
                dragEndAction=(action 'dragEnd')
                handle=".drag-handle"
            ] as | item |

handle code :

        i.material-icons.drag-handle draggable="true"
          | drag_indicator

which results in this error: console_error *note I am using emblem template syntax

for additional context, heres what my dragEnd action looks like:

        dragEnd({ sourceList, sourceIndex, targetList, targetIndex }) {
          console.log(sourceList, sourceIndex, targetList, targetIndex);
          if (sourceList === targetList && sourceIndex === targetIndex) return;

          const item = sourceList.objectAt(sourceIndex)
          sourceList.removeAt(sourceIndex); 
          targetList.insertAt(targetIndex, item)

everything works when i take the handle selector off, unsure whats going on.