How to use a DragHandle inside a child Component?

I have created a custom component with a DragHandle inside it. When I create a SortableList with this component, the DragHandle can no longer be used. You can't interact with it using the mouse on the handle.

I've tried to attach an onSortEnd event in the component with no luck. Any Ideas, what am I missing?

```
import React from 'react';
import { SortableHandle } from 'react-sortable-hoc';

const DragHandle = SortableHandle(() => ::);

class CustomSortableItem extends React.Component {
constructor(props) {
super(props);

this.state = {

}
}
removeItem(item) {
this.props.removeItem(item);
}
render() {
var index = this.props;index;
var item = this.props.item;

return (


{item}



this.removeItem(item)}>


)
}
}

export default CustomSortableItem
```

```
import CustomSortableItem from './CustomSortableItem.js'

const SortableList = SortableContainer(({items, removeItem}) => {
return (

{items.map((value, index) => (

))}

);
});

class MainPage extends React.Component {
constructor(props) {
super(props);

this.state = {
items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6']
}
}
componentDidMount() {

}
onSortEnd = ({oldIndex, newIndex}) => {
const { slots } = this.state;

this.setState({
slots: arrayMove(slots, oldIndex, newIndex),
});
}
removeItem(item) {
console.log('removeItem')
console.log(item)
}
render() {
const { items } = this.state;

return (

)
}
}

export default MainPage
```