Dnd-kit拖拽组件释放时过渡动画失效问题求助

我正在开发一个简易测验，包含4个可放置（droppable）区域和4个可拖拽（draggable）项，测验目标是将所有项移至正确顺序或对应的可放置区域。目前拖拽交换功能正常（例如将item 1移至droppable 3时，droppable 1会显示item 3，droppable 3显示item 1），但存在一个问题：拖拽结束时可拖拽项没有任何过渡动画。我已按以下方式实现过渡效果：

draggable/index.tsx

import { useDraggable } from '@dnd-kit/core';
import { CSS } from '@dnd-kit/utilities';
import clsx from 'clsx';
import React, { ReactNode } from 'react';

import s from './draggable.module.scss';

type TProps = {
   children: ReactNode;
   id: string;
};

export const Draggable = ({ id, children }: TProps) => {
   const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
      id,
   });
   const style = {
      ...{ transition: 'transform 250ms ease' },
      ...(transform ? { transform: CSS.Translate.toString(transform) } : {}),
      ...(isDragging ? { transition: 'none' } : {}),
   };

   return (
      <button
         ref={setNodeRef}
         className={clsx(s.wrapper, isDragging && s.dragging)}
         style={style}
         {...listeners}
         {...attributes}
      >
         {children}
      </button>
   );
};

内容的提问来源于stack exchange，提问作者Lvasche