Почему не работает react-beautiful-dnd?

Question

[ParaBellum577]

Всем привет! Сделал простой пример для ДнД, но почему-то ничего не работает. Появился только cursor: grab на элементе и на этом все. Ошибок в консоли никаких нет. Пожалуйста, знатоки, подскажите в чем проблема??)
Хотя в аналогичных примерах все работает... https://codesandbox.io/s/jovial-leakey-i0ex5?file=...


Атрибуты днд в дом дереве появились

import React, { useState, memo } from 'react';
import ReactTooltip from 'react-tooltip';
import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
import _ from 'lodash';
import { BsThreeDots } from 'react-icons/bs';
import StatusPopUP from './taskPopUps/status';
import PriorityPopUp from './taskPopUps/priority';

import styles from './index.module.scss';
import buttons from 'src/components/buttons.module.scss';


const Sprint = function () {

    const projects = [
        {
            Name: 'project',
            status: 'active',
            FromDate: '10-12-2018',
            ToDate: '10-12-2020',
            id: 1
        },
        {
            Name: 'project222',
            status: 'active',
            FromDate: '10-12-2018',
            ToDate: '10-12-2020',
            id: 2
        },
        {
            Name: 'project23',
            status: 'active',
            FromDate: '10-12-2018',
            ToDate: '10-12-2020',
            id: 3
        },
    ];
    return (
        <div className={styles.backlog}>
            <div className={styles.backlogHeader}>
                <h2>Sprint Name</h2>
                <div>
                    {/* <button className={buttons.buttonConfirm}>Додати завдання</button> */}
                    <button className={buttons.buttonConfirm}>Почати спринт</button>
                </div>
            </div>
            <DragDropContext
                onDragEnd={result => console.log(result)}
            >
                <Droppable droppableId={1} key={1}>
                    {
                        provided => {
                            return (
                                <div
                                    {...provided.droppableProps}
                                    ref={provided.innerRef}
                                    className={styles.taskList}
                                >
                                    {
                                        projects.map((e, i) => (
                                            <Draggable
                                                key={e.id}
                                                draggableId={e.id}
                                                index={i}
                                            >
                                                {
                                                    provided => (
                                                        <div
                                                            ref={provided.innerRef}
                                                            {...provided.draggableProps}
                                                            {...provided.dragHandleProps}
                                                            className={styles.taskListItem}
                                                        >
                                                            <span>{e.Name}</span>
                                                            <div>
                                                                <StatusPopUP />
                                                                <PriorityPopUp />
                                                                <BsThreeDots size="20" />
                                                            </div>
                                                        </div>
                                                    )
                                                }
                                            </Draggable>

                                        ))
                                    }
                                </div>
                            )
                        }
                    }
                </Droppable>
                </DragDropContext>
                <ReactTooltip />
                <ReactTooltip />
        </div>
    )
}

export default memo(Sprint);

Answer 1

[ParaBellum577]

Пока ждал ответа - сам нашел решение... Может кому-то поможет в будущем:
В общем draggableId={e.id} у меня - int, а должен быть str.
Поменял id: 1 на id: "1" и все заработало.