i have a parent component in which i am using DndContext and inside it we have two childd component which have drag and drop functionality enabled

[keshavacil]

this is my component
0 ? customCollisionDetection : closestCenter
}
onDragEnd={handleDragEnd}
onDragStart={handleDragStart}
// onDragOver={handleDragOver}
>
{/* Left sidebar */}

<Tabs
tabBarStyle={{ width: "100%", marginBottom: Sizes.padding }}
color={Colors.textBlack}
className="question_right_tabs"
defaultActiveKey="1"
items={items}
centered
/>

    {/* Main content */}
    <div className="right-sidebar h-[95vh] overflow-y-auto">
      <AssessmentStudio
        questionList={questionList}
        setQuestionList={setQuestionList}
        assessmentData={assessmentData}
        handleEditAssessment={handleEditAssessment}
        handleDeleteQuestion={handleDeleteQuestion}
        handleImportQuestion={handleImportQuestion}
        handleEditQuestion={handleEditQuestion}
        type={type}
      />
    </div>
    <DragOverlay
        style={{ pointerEvents: 'none' }}
    >
      {activeItem ? (
        <div 
              className="flex flex-col items-center justify-center gap-5 border border-mid-gray rounded-lg px-2 py-4 h-full min-h-28 w-full cursor-grab text-dark-gray active:cursor-grabbing"
        >
          <div className="w-6 h-6 flex items-center justify-center text-black">
            {activeItem.icon}
          </div>
          <span className="text-sm font-normal text-center">
            {activeItem.text}
          </span>
        </div>
      ) : null}
    </DragOverlay>
  </DndContext>
  
  in which Tags are on left side from where i will drag a question and will drop it in AssessmentStudio component and in assessmentStudio i can have many questions list with overflow auto. but the broblem is while holding question in dragged position wants to move from top to bottom it's too leggy i want it smooth i want to increase it's scrolling speed.