drag and drop в react фильтрует, но мне нужно чтобы список выводился в том порядке в котором я закидываю элементы

Мой первый вопрос, если я его задаю не правильно дайте знать. Спасибо за предложенные варианты! Код взят с gita в качестве теста, но мен нужно добиться своего результата что бы список не фильтровался по убыванию. не понимаю в чем может быть проблема оригинал кода - https://github.com/rajeshpillai/youtube-react-components/blob/master/src/AppDragDropDemo.js

import '../styles/app.css';

export default class AppDragDropDemo extends Component {
    state = {
        tasks: [
            {name:"Line01",category:"wip", bgcolor: "yellow", width: "class100px"},
            {name:"Line02", category:"wip", bgcolor:"pink", width: "class110px"},
            {name:"Line03", category:"wip", bgcolor:"skyblue", width: "class120px"},
            {name:"Line04", category:"wip", bgcolor:"skyblue", width: "class130px"},
            {name:"Line05", category:"wip", bgcolor:"skyblue", width: "class140px"},
        ]
    }

    onDragStart = (ev, id) => {
        console.log('dragstart:',id);
        ev.dataTransfer.setData("id", id);
    }

    onDragOver = (ev) => {
        ev.preventDefault();
    }

    onDrop = (ev, cat) => {
        let id = ev.dataTransfer.getData("id");

        this.state.tasks.map((task) => {
            if (task.name === id) {
                task.category = cat;
            }
            return task;
        });

        this.setState({
            ...this.state
        });
    }

    render() {
        var tasks = {
            wip: [],
            complete: [],
            tower03: [],
        }

        this.state.tasks.map((t) => {
            tasks[t.category].push(
                <div key={t.name}
                     onDragStart = {(e) => this.onDragStart(e, t.name)}
                     draggable
                     className={t.width}
                     style = {{backgroundColor: t.bgcolor}}
                >
                    {t.name}
                </div>
            );
        });

        return (
            <div className="container-drag">
                <h2 className="header">DRAG & DROP DEMO</h2>
                <div className="wip"
                     onDragOver={(e)=>this.onDragOver(e)}
                     onDrop={(e)=>{this.onDrop(e, "wip")}}>
                    <span className="task-header">Tower 1</span>
                    {tasks.wip}
                </div>
                <div className="droppable"
                     onDragOver={(e)=>this.onDragOver(e)}
                     onDrop={(e)=>this.onDrop(e, "complete")}>
                    <span className="task-header">Tower 2</span>
                    {tasks.complete}
                </div>
                <div className="droppable03"
                     onDragOver={(e)=>this.onDragOver(e)}
                     onDrop={(e)=>this.onDrop(e, "tower03")}>
                    <span className="task-header">Tower 3</span>
                    {tasks.tower03}
                </div>
            </div>
        );
    }
}```˚
[![screenShot][2]][2]


  [1]: https://github.com/rajeshpillai/youtube-react-components/blob/master/src/AppDragDropDemo.jsh
  [2]: https://i.stack.imgur.com/arlts.png