does sortable not compatible with droppable using closestCenter collision?

[GunnerCat]

im sorry if this is my fault of coding, but im trying to make a program where a sortable item is able to be removed if we were to drag it onto a droppable, i kind of make it work, but for some odd reason, i just cant get it work with closestCenter collision.

Somehow the droppable is triggered outside its box, but this isnt the case if i were to change the collision to rectIntersection

is there anything that i've missed in this code? because i've been looking for the answer for days

<DndContext sensors={sensors} collisionDetection={rectIntersection} onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
                <div className="mb-5">
                  <SortableContext
                    items={players.map((player) => player.id)}
                    strategy={verticalListSortingStrategy}
                  >
                    {players
                      ? players.map((player, index) => (
                          <SortableItem
                            key={player.id}
                            id={player.id}
                            name={player.name}
                            idx={index}
                            itemSize={players.length}
                          />
                        ))
                      : "nothing"}
                  </SortableContext>
                  <DragOverlay dropAnimation={{ 
                    duration: 100,
                    easing: 'cubic-bezier(0.18, 0.67, 0.6, 1.22)',
                  }}>
                    {activeItem ? (
                      <SortableItem  key={activeItem.id}
                            id={activeItem.id}
                            name={activeItem.name}
                            idx={players.findIndex((player) => player.id === activeItem.id)}
                            itemSize={players.length} /> 
                    ): null}
                  </DragOverlay>
                </div>

</DndContext>