Реакция красивая DnD, все остальные элементы смещаются вправо ⇐ Javascript

[Anonymous]

Я пытаюсь реализовать React Beautiful DnD для своего приложения. Однако я заметил довольно любопытную проблему.
Исходный список перед перетаскиванием
Я заметил, что когда я пытаюсь перетащить элементы, все остальные элементы (элементы, которые не перетаскиваются) в списке смещаются вправо.
Список во время перетаскивания
Изначально я подумал, что это проблема CSS, поэтому попытался удалить весь CSS, но проблема упорствовал. Я также понимаю, что в текущем коде ниже, но с тех пор я исправил работу функции onDragEnd, но проблема все еще сохраняется. Из-за этой проблемы перетаскиваемые элементы всегда будут располагаться сверху, несмотря на то, что я хочу разместить их в других местах.
Ниже приведен мой код:
import { SysFooterButtonGroup, SysProFormInput, TranslatedMessage } from '@comp/components-mobile';
import { Form } from 'antd-mobile';
import React, { useEffect } from 'react';
import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd';

const BillItem: React.FC = () => {
const [form] = Form.useForm();
const analysisTemplateItemGroups = Form.useWatch('analysisTemplateItemGroups', form);

const [items] = React.useState([
{ id: '1', name: 'Item 1' },
{ id: '2', name: 'Item 2' },
{ id: '3', name: 'Item 3' },
]);
form.setFieldValue('analysisTemplateItemGroups', items);

useEffect(() => {
console.log(analysisTemplateItemGroups, 'analysisTemplateItemGroups useEffect');
}, [analysisTemplateItemGroups]);
const onDragEnd = (result: DropResult) => {
if (!result.destination) {
return;
}

const items = [...(analysisTemplateItemGroups || [])];
const [reorderedItem] = items.splice(result.source.index, 1);
items.splice(result.destination.index, 0, reorderedItem);

form.setFieldValue('analysisTemplateItemGroups', items);
};

return (



style={{
padding: '20px',
maxWidth: '600px',
margin: '0 auto',
position: 'relative',
overflow: 'visible',
}}
>
Testing Drag



{(provided) => (

{analysisTemplateItemGroups?.map((item, dragIndex) => (

{(provided, snapshot) => (

{item.name}

)}

))}
{provided.placeholder}

)}






);
};
export default BillItem;


Подробнее здесь: https://stackoverflow.com/questions/798 ... -the-right