Add/delete draggable item in beautiful drag and drop (dnd) - reactjs

Question

First, I'm new to React.
So, I've been making some drag and drop feature while there are also add and delete item feature on it. There are only 2 jsx file that I use, first is DragDropContext and the second is Column (Column with draggable item on it).
Here some code for your better understanding
<DragDropContext onDragEnd={onDragEnd}>
<div className="w-full md:w-[80vw] h-screen p-5 lg:p-20 overflow-y-scroll text-gray-800 bg-slate-100">
<h3 className='text-2xl font-bold'>Favorite Page</h3>
<div className='flex justify-between items-center mt-8'>
<div>
<input type="text" placeholder='type something...' className='p-2 rounded' />
<input type="button" value="Add" className='p-2 rounded bg-indigo-300 ml-4' />
</div>
<div>
<button onClick={onOff}
className={`px-4 py-2 rounded-full text-white ${isToggled ? 'bg-indigo-500': 'bg-slate-400'}`}>{`${isToggled ? 'Edit Page' : 'Save Page'}`}</button>
</div>
</div>
{isToggled ?
<div className='flex mt-5 w-full gap-5 h-fit'>
{state.columnOrder.map((columnId) => {
const column = state.columns[columnId];
const tasks = column.taskIds.map(taskId => state.tasks[taskId]);
// console.log(tasks);
return <Column key={column.id} column={column} tasks={tasks} dataPost={dataPost} enable={true} color={'bg-slate-100'} toggle={isToggled}/>
})}
</div>
:
<div className='flex mt-5 w-full gap-5 h-fit'>
{state.columnOrder.map((columnId) => {
const column = state.columns[columnId];
const tasks = column.taskIds.map(taskId => state.tasks[taskId]);
// console.log(tasks);
return <Column key={column.id} column={column} tasks={tasks} dataPost={dataPost} enable={false} color={'bg-white'} deleteItem={deleteItem}/>
})}
</div>
}
</div>
</DragDropContext>
and this one is for Column
const Column = ( {column, tasks, enable, color, deleteItem, toggle}) => {
return(
<div className={`${column.colorBody} w-full rounded-xl overflow-hidden`}>
<p className={` ${column.colorHead} w-full p-4 text-center text-lg font-light text-white`}>{column.title}</p>
<Droppable droppableId={column.id}>
{(droppableProvided, droppableSnapshot) => (
<div key={column.id} className='w-full h-fit p-5 flex flex-col gap-4' ref={droppableProvided.innerRef} {...droppableProvided.droppableProps}>
{tasks.map((task, index) =>(
<Draggable key={task.id} draggableId={`${task.id}`} index={index} isDragDisabled={enable}>
{(draggableProvided, draggableSnapshot) => (
<div className={`${color} w-full flex justify-between rounded h-fit overflow-hidden ${draggableSnapshot.isDragging? 'border-4 border-indigo-400' : ''}`} id={task.id}
ref={draggableProvided.innerRef}
{...draggableProvided.draggableProps}
{...draggableProvided.dragHandleProps}
>
<div className="flex">
<img className="w-[25%] object-cover" src={`http://127.0.0.1:8000/storage/${task.image}`} alt="" />
<p className='p-4 w-[75%]'>{task.title}</p>
</div>
<button onClick={() => {deleteItem(task.id, column.id)}} className={`button-x ${toggle? 'hidden' : 'block'} h-full bg-red-400 text-white flex items-center justify-center pt-2 pr-2 pb-4 pl-4 rounded-bl-full`}><i className="bi bi-x-lg"></i></button>
</div>
)}
</Draggable>
))}
{droppableProvided.placeholder}
</div>
)}
</Droppable>
</div>
Actually, I'm successful at deleting the item. Still, it throws errors in console and when I drop item on the place that I delete the item before, it'll go to the top left corner and back to the deleted position (place that I drop earlier, like a boomerang). The way I deleted the item is only with deleting the div (draggable item), and when i tried to update the state, it completely not rendering on browser.
The error that throws by console are
Unable to find drag handle with id "1" as no handle with a matching id was found -> in yellow
and
`A setup problem was encountered.
Invariant failed: Draggable[id: 1]: Unable to find drag handle` -> in red
Probably if PublicDraggable key="xx" component is deleted, the error would be gone, but it can't be done that way, right?
So, maybe I need some enlightenment, which function or where is the thing that needs and store Draggable Id except on the div.