reactjs - ネストされたドラッグ アンド ドロップで、react dragula を使用する

Question

私は反応プロジェクトに取り組んでおり、タスクをタスクをサブタスクにドラッグし、ネスト可能のようにドラグラを反応させたいと考えています。

コード：

dragulaDecorator = (componentBackingInstance) => {
   if (componentBackingInstance) {
      this.containers.push(componentBackingInstance)
   }
};
componentDidMount() {
   this.isMount = true;
   let tasks = this.props.tasks
   this.setState({ allTasks: tasks})
   this.drake = dragula(this.containers, {
      isContainer: function (el) {
         return el.id === 'single-task';
      },
      moves: function (el, source, handle, sibling) {
         return handle.classList.contains('icon-handle');
      }
   });
}

<ul className="tjs-list list-unstyled single-task" ref={this.dragulaDecorator}>
   {this.state.allTasks && (this.state.allTasks.length > 0) && this.state.allTasks.map((field, key) => {
      return (
         <li key={key}>
            <h4>
               <i className="tjsicon-sort icon-handle"></i>
               {field.name}
            </h4>
         </li>
      )
   })}
</ul>

上記のコードで単純なドラッグ アンド ドロップを作成しましたが、サブタスク内のタスクとそのサブタスクなどをドラッグする必要があります。だから私が望むものを達成する方法を教えてください