DndKit transition delay on drop, useSortable

Question

When I drop an element to resort, there's a slight transition issue where the items goes back to its' original position & then transitions. Below I added a link to video & code.

Really, I don't want any transition delay, etc. I feel like it could be the remapping of the array, but i've tested it by optimizing as much as possible & still getting the same issue. It works fine without the transition property on there, but would like it to make things feel smooth.

Link to video --> Link to video

import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import React from 'react';
import Icon from '../../../../../../../common/components/icon/Icon';

interface Props {
   id: number;
   children: React.ReactNode;
}

const SortableItem = ({ id, children }: Props) => {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: id });

   return (
      <div
         ref={setNodeRef}
         style={{
            transform: CSS.Transform.toString(transform),
            transition,
         }}>
         <div className='grid grid-cols-[60px_auto] items-center w-full h-full relative'>
            {/* Make this the icon grabble */}
            <div
               className='flex items-center w-full h-full cursor-grab'
               data-grab={true}
               {...attributes}
               {...listeners}>
               <Icon name='ArrowsUpDownLeftRight' width={20} height={20} />
            </div>
            {children}
         </div>
      </div>
   );
};

export default SortableItem;

'use client';
import React, { useState } from 'react';
import { ListenService } from '../SmartLinkClient';
import Icon from '../../../../../../common/components/icon/Icon';
import Input from '../../../../../../common/components/input/Input';
import ToggleSwitch from '../../../../../../common/components/toggle-switch/ToggleSwitch';
import Hr from '../../../../../../common/components/hr/Hr';
import { DndContext, PointerSensor, useSensor, useSensors, closestCenter } from '@dnd-kit/core';
import { SortableContext, arrayMove, verticalListSortingStrategy } from '@dnd-kit/sortable';
import SortableItem from './(edit-services-partials)/SortableItem';

interface Props {
   servicesConfig: ListenService[];
   handleServiceShowToggle: (e: any, elementToChange: ListenService) => void;
   handleServiceDragEnd: (active: any, over: any) => void;
}

const EditServices = ({ servicesConfig, handleServiceShowToggle, handleServiceDragEnd }: Props) => {

   const sensors = useSensors(useSensor(PointerSensor));
   return (
      <div className='select-services'>
         <div className='flex flex-col gap-y-4'>
            <DndContext
               sensors={sensors}
               collisionDetection={closestCenter}
               onDragEnd={({ active, over }) => {
                  handleServiceDragEnd(active, over);
               }}>
               <SortableContext
                  items={servicesConfig.map((service: ListenService) => service.id)}
                  strategy={verticalListSortingStrategy}>
                  {/* Components that use the useSortable hook */}
                  {servicesConfig.map((service: ListenService, i: number) => (
                     <SortableItem key={i} id={service.id}>
                        <div className='grid grid-cols-[minmax(160px,180px)_minmax(200px,auto)_100px] items-center'>
                           <div className='grid grid-cols-[24px_auto] items-center gap-x-3 dark:text-stone-100 text-stone-800'>
                              <Icon name={service.iconName} width={24} height={24} color={service.color} />
                              <span className='text-[16px]'>{service.name}</span>
                           </div>
                           <Input
                              placeholder='We could not find a valid URL, but you can enter your own.'
                              type={'url'}
                           />
                           <div className='justify-self-end -mt-2 flex flex-row items-center gap-x-2'>
                              <span className='text-[11px] text-stone-600 dark:text-stone-300'>Show</span>
                              <ToggleSwitch
                                 toggled={service.show}
                                 handleToggled={(e: any) => {
                                    handleServiceShowToggle(e, service);
                                 }}
                              />
                           </div>
                        </div>
                        {i !== servicesConfig.length - 1 && (
                           <span className='col-span-2'>
                              <Hr />
                           </span>
                        )}
                     </SortableItem>
                  ))}
               </SortableContext>
            </DndContext>
         </div>
      </div>
   );
};

export default EditServices;

Answer 1

I ended up figuring it out. The key on the <SortableItem /> component must be the same as the id on the <SortableItem /> component. Weird, but makes sense.

Previous: ex) <SortableItem key={i} id={service.id} />

Current (Solution): ex) <SortableItem key={service.id} id={service.id} />