<DragDropContext onDragEnd={handleDragEnd} >
                        {/* Backlog */}
                        <Droppable droppableId="Backlog">
                            {(provided) => (
                                <div {...provided.droppableProps} ref={provided.innerRef} className='flex flex-col align-middle w-full items-center'>
                                    <div className='flex flex-col align-middle w-full items-center'>
                                        <div className='flex flex-col justify-center align-middle w-[164px] h-[100px] items-center'>

                                            <button className=" shadow-gray-300 h-[42px] shadow-md text-black border-0 text-base w-full font-semibold pl-5 rounded-lg items-center flex justify-between bg-white hover:bg-blue-200  hover:text-blue-600"
                                                onClick={() => {
                                                    setOpenModal(true)
                                                    setType('Backlog')

                                                }}>
                                                Backlog
                                                <div className=' bg-blue-200 rounded-full w-[25px] h-[25px] mr-3 flex items-center justify-center'>
                                                    <FaPlus className="  text-blue-400 h-[13px] w-[13px]  " />
                                                </div>
                                            </button>
                                        </div>
                                    </div>
                                    <CardBacklog />
                                    {provided.placeholder}
                                </div>
                            )}


                        </Droppable>

                        {/* Todo */}

                        <Droppable droppableId="To Do">
                            {(provided) => (
                                <div {...provided.droppableProps} ref={provided.innerRef} className='flex flex-col align-middle w-full items-center'>
                                    <div className='flex flex-col align-middle w-full items-center'>
                                        <div className='flex flex-col justify-center align-middle w-[164px] h-[100px] items-center'>

                                            <button className=" shadow-gray-300 h-[42px] shadow-md text-black border-0 text-base w-full font-semibold pl-5 rounded-lg items-center flex justify-between bg-white hover:bg-blue-200  hover:text-blue-600"
                                                onClick={() => {
                                                    setOpenModal(true)
                                                    setType('To Do')

                                                }}>
                                                To Do
                                                <div className=' bg-blue-200 rounded-full w-[25px] h-[25px] mr-3 flex items-center justify-center'>
                                                    <FaPlus className="  text-blue-400 h-[13px] w-[13px]  " />
                                                </div>
                                            </button>
                                        </div>
                                    </div>
                                    <CardToDo />
                                    {provided.placeholder}

                                </div>
                            )}
                        </Droppable>
                        {/* InProgress */}

                        <Droppable droppableId="In Progress">
                            {(provided) => (
                                <div {...provided.droppableProps} ref={provided.innerRef} className='flex flex-col align-middle w-full items-center'>
                                    <div className='flex flex-col align-middle w-full items-center'>
                                        <div className='flex flex-col justify-center align-middle w-[164px] h-[100px] items-center'>

                                            <button className=" shadow-gray-300 h-[42px] shadow-md text-black border-0 text-base w-full font-semibold pl-5 rounded-lg items-center flex justify-between bg-white hover:bg-blue-200  hover:text-blue-600"
                                                onClick={() => {
                                                    setOpenModal(true)
                                                    setType('In Progress')

                                                }}>
                                                In Progress
                                                <div className=' bg-blue-200 rounded-full w-[25px] h-[25px] mr-3 flex items-center justify-center'>
                                                    <FaPlus className="  text-blue-400 h-[13px] w-[13px] " />
                                                </div>
                                            </button>
                                        </div>
                                    </div>
                                    <CardInProg />
                                    {provided.placeholder}

                                </div>
                            )}
                        </Droppable>
                        {/* Completed */}

                        <Droppable droppableId="Completed">
                            {(provided) => (
                                <div ref={provided.innerRef} {...provided.droppableProps} className='flex flex-col align-middle w-full items-center'>
                                    <div className='flex flex-col align-middle w-full items-center'>
                                        <div className='flex flex-col justify-center align-middle w-[164px] h-[100px] items-center'>

                                            <button className=" shadow-gray-300 h-[42px] shadow-md text-black border-0 text-base w-full font-semibold pl-5 rounded-lg items-center flex justify-between bg-white hover:bg-blue-200  hover:text-blue-600"
                                                onClick={() => {
                                                    setOpenModal(true)
                                                    setType('Completed')

                                                }}>
                                                Completed
                                                <div className=' bg-blue-200 rounded-full w-[25px] h-[25px] mr-3 flex items-center justify-center'>
                                                    <FaPlus className="  text-blue-400 h-[13px] w-[13px]  " />
                                                </div>
                                            </button>
                                        </div>
                                    </div>
                                    <CardComplete />
                                    {provided.placeholder}

                                </div>
                            )}
                        </Droppable>

                    </DragDropContext>

I don’t know what I am doing wrong. Everything seems perfect. Items are draggable and droppable in their own column.’Backlog,ToDo,InProgress,Completed‘-column

I used react-beautiful-dnd 1st but it has lot’s of problems. My solution was change all imports from react-beautiful-dnd into @hello-pangea/dnd. It worked perfectly. All errors gone . Now I need to know how to drag and drop between columns (components).