Dragging item is moves faster than cursor

Question

Im using dnd-kit to drag and drop buttons, but when I drag them the button moves faster than the cursor and ends up in a different place than the cursor, as you can see

This is the code Im using:

function GridWard(){
        return(
       <Grid container spacing={3} >
            <DndContext 
                onDragEnd={orderUpdate}>
                <SortableContext items={bedsSorted.map(bed => bed.order.toString())}>
                        <Droppable id="droppable">
                            {
                                bedsSorted.map((bed, index) => {
                                    return(
                                        
                                        <SortableItem
                                            key={index}
                                            id={index.toString()}>
                                            <BedButton name={bed.name} onClick={() => editBed(bed)}
                                                type="edit" active={bed.active} deleteCallBack={(e:Event) => deleteBed(e, bed)}
                                                gender={bed.gender === 0 ? "male" : bed.gender === 1 ? "female" : "any"} 
                                            />                                               
                                            </SortableItem>
                                        
                                    )
                                })
                            } 
                        </Droppable>
                    
                </SortableContext>
            </DndContext>
        </Grid>
     );
 }

Answer 1

The problem may be here

  key={index}

Pass a proper key to the element, like a unique id, so reordering will work