Отображение карт перетаскивания с помощью jSX / React

Question

Я пытаюсь создать доску задач с «карточками» задач, которые можно переупорядочить с помощью функции перетаскивания.У меня есть массив объектов задачи, и для каждой задачи я планирую <li>, чтобы он содержал значения объекта задачи (например, taskName, taskBody и т. Д.), И все они отображаются в <ul>.Это прекрасно работает, если у меня есть только эти значения в <li>, но если я пытаюсь обернуть каждое из них в оболочку html (например, теги <p>), по какой-то причине я могу перетащить карту в серединудругой карты между значениями и разрывом приложения.

Как отобразить эти карты, чтобы функция перетаскивания не нарушалась?Есть ли лучший метод перетаскивания, который я должен использовать, или это просто проблема JSX?

Вот компонент задачи:

import React, { Component } from 'react';
import './Task.scss';

let placeholder = document.createElement('li');
placeholder.className = 'placeholder';

class Task extends Component {
    constructor(props) {
        super(props);
        this.state = { ...props };
    }

    dragStart(e) {
        this.dragged = e.currentTarget;
        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.setData('text/html', this.dragged);
    }

    dragEnd(e) {
        this.dragged.style.display = 'block';
        this.dragged.parentNode.removeChild(placeholder);

        // Update state
        let data = this.state.tasks;
        let startPosition = Number(this.dragged.dataset.id);
        let endPosition = Number(this.over.dataset.id);
        if (startPosition < endPosition) endPosition--;
        data.splice(endPosition, 0, data.splice(startPosition, 1)[0]);
        this.setState({ tasks: data });
    }

    dragOver(e) {
        e.preventDefault();
        this.dragged.style.display = "none";
        if (e.target.className === 'placeholder') return;
        this.over = e.target;
        e.target.parentNode.insertBefore(placeholder, e.target);
    }

    render() {
        let taskList = this.props.tasks.map((task, i) => {
            return (
                <li
                    className="task"
                    data-id={i}
                    key={i}
                    draggable='true'
                    onDragOver={this.dragOver.bind(this)}
                    onDragEnd={(this.dragEnd.bind(this))}
                    onDragStart={this.dragStart.bind(this)}
                >
                    //These are are what don't work wrapped in other tags:
                    {task.taskName} 
                    {task.taskBody}
                </li >
            );
        });
        return (
            <ul className="taskList">
                {taskList}
            </ul>
        )
    }
}

export default Task;