Problem facing when add HTML content into atlaskit/dynamic-table(DynamicTableStateless) headings cell

In our react app we are using atlaskit/dynamic-table(DynamicTableStateless) to dissplay some data.
We need to support the adjusted column width for that we are using react-draggable(Draggable)
We added Draggable into DynamicTableStateless headings cell like that,

headings = {
          cells: [...headings.cells, UsersList.getHeader('displayName', (
            <div>
              {T.translate(attribute.name)}
              {draggable
              && (
                <span style={{ float: 'right' }}>
                  <Draggable
                    axis="x"
                    defaultClassName="DragDropHandle"
                    defaultClassNameDragging="DragDropHandleActive"
                    onDrag={(event, { deltaX }) => this.resizeRow(deltaX)}
                    onStop={(event, { deltaX }) => this.resizeRowStop(deltaX)}
                    position={{ x: 0 }}
                    zIndex={999}
                  >
                    <span className="DragDropropHandleIcon">⋮</span>
                  </Draggable>
                </span>
              )
            }
            </div>
          ), true, this.state.defaultWidth)],
        };

After that our table column looks like this,

But after clicking on the draggable icon, the sorting call is executed.
So how to add any HTML content into DynamicTableStateless headings cell without sorting behavior.

Note: Same draggable component we using for @atlaskit/table-tree(TableTree) Header & it’s working fine.