drag and drop issue within Drawer using react-beautiful-dnd

Question

My problem is why destination and source is not same when i drag and drop within same droppableId (droppableId="drawer-droppable"). how to fix this issue?

` import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";

  <DragDropContext onDragEnd={onDragEnd}>
    <Droppable droppableId="main-droppable" type="common">
      {(provided) => (
        <div {...provided.droppableProps} ref={provided.innerRef}></div>
      )}
    </Droppable>
    // Drawer Component
    <Drawer>
      <Droppable droppableId="drawer-droppable" type="common">
        {(provided) => (
          <div {...provided.droppableProps} ref={provided.innerRef}>
            <Draggable key={item.id} draggableId={item.id} index={index}>
              {(provided) => (
                <div
                  {...provided.draggableProps}
                  {...provided.dragHandleProps}
                  ref={provided.innerRef}
                >
                  {item.content}
                </div>
              )}
            </Draggable>
          </div>
        )}
      </Droppable>
    </Drawer>
  </DragDropContext>

`