React Beautiful DND не может найти draggableId

Question

У меня есть простой контейнер, который содержит несколько карт и два слота (маленькие контейнеры) над этим контейнером.

Я перетаскиваю контейнер из карт в первый слот, и он работает нормально. Перетаскиваю на второй слот, тоже работает нормально. Когда я перетаскиваю из первого слота во второй, он работает нормально, но когда я пытаюсь перетащить обратно из второго слота в первый, реакция dnd говорит: «невозможно найти draggableId - [идентификатор карты]. То же самое происходит, если я в обратном порядке (перетаскивание со второго на первое отлично работает в первый раз, затем, если я пытаюсь перетащить со второго на второе, оно не будет работать)

Вот мой код.

const draggableContainer = () => {
    // the onDrag end Function
    const onDragEnd = result => {
        const {
            destination,
            source,
            draggableId
        } = result;
        if (!destination) {
            return;
        }
        if (
            destination.droppableId === source.droppableId &&
            destination.index === source.index
        ) {
            return;
        }

        const sourceCard = state.slots[source.droppableId];
        const newCard = state.slots[destination.droppableId];
        const newSlots = {
            ...state.slots,
            [source.droppableId]: {
                ...sourceCard,
                cardId: newCard.cardId
            },
            [destination.droppableId]: {
                ...newCard,
                cardId: sourceCard.cardId
            }
        };
        setState({
            cards: state.cards,
            slots: newSlots
        });
    }

    return ( <
        div className = {
            Style.cardContainer
        } > {
            allSlots &&
            allSlots.map((slot, index) => {
                const currentSlot = state.slots[slot];
                const {
                    cardId
                } = currentSlot;
                const chosenCard = cardToRender(cardId);
                return ( <
                    CardSlot slot = {
                        currentSlot
                    }
                    cardId = {
                        cardId
                    } > {
                        chosenCard && ( <
                            Draggable draggableId = {
                                cardId.toString()
                            }
                            index = {
                                index
                            }
                            {*/ Keeping this makes it work fine. Removing it causes the issue*/}
                            key = {
                                cardId
                            } >
                            {
                                (provided, snapshot) => ( <
                                    Box {
                                        ...provided.draggableProps
                                    } {
                                        ...provided.dragHandleProps
                                    }
                                    ref = {
                                        provided.innerRef
                                    }
                                    isDragging = {
                                        snapshot.isDragging
                                    } >
                                    <
                                    MotivatorCard title = {
                                        chosenCard.name
                                    }
                                    src = {
                                        chosenCard.imgs.desktop
                                    }
                                    width = {
                                        100
                                    }
                                    height = {
                                        100
                                    }
                                    /> <
                                    /Box>
                                )
                            } <
                            /Draggable>
                        )
                    } {
                        !chosenCard && ( <
                            StyledPlaceholder hasDragStarted = {
                                hasDragStarted
                            } > {
                                index + 1
                            } <
                            /StyledPlaceholder>
                        )
                    } <
                    /CardSlot>
                );
            })
        } <
        /div>
    )
}

Компонент CardSlot - это dropabble, который оборачивается вокруг карты, которая является перетаскиваемой. Вот код для этого:

export default ({ children, slot }) => {
    return (
        <Droppable droppableId={slot.id}>
            {(provided, snapshot) => (
                <StyledBox
                    className={`slot ${Style.cardWrapper}`}
                    ref={provided.innerRef}
                    {...provided.droppableProps}
                    isDraggingOver={snapshot.isDraggingOver}
                >
                    {children}
                    {provided.placeholder}
                </StyledBox>
            )}
        </Droppable>
    );
};

Дело в том, если я сохраню key опору на самом Draggable, который является key = {cardId} работает нормально, без проблем. Если я удаляю его и сохраняю пропелу key только на CardSlot, выдает ошибку, о которой я упоминал выше (Невозможно найти draggableId)

Может кто-нибудь объясните, почему, когда я добавляю опору ключа в компонент Draggable, он работает, хотя для него ключ даже не требуется?