I'm using antd's list, and I need it to be rearrangeable. To achieve that, I have implemented react-beautiful-dnd, which is working well. However, I'm facing an issue where my page shrinks and expands while dragging and dropping. Could you please suggest a fix for this problem?
<DragDropContext onDragEnd={() => {}}>
<Droppable>
{(provided) => (
<div ref={provided.innerRef} {...provided.droppableProps}>
<List
dataSource={arrangeResponsesProperties.filter(
({ key }) => key !== "chart"
)}
renderItem={(responseProperty, index) => (
<Draggable
draggableId={responseProperty.key}
index={index}
key={responseProperty.key}
>
{(provided) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<Row align="middle">
<Col span={24}>
<Form.Item
name={
responseProperty.key +
"~*!*$*~display_name"
}
>
<Input />
</Form.Item>
</Col>
</Row>
</div>
)}
</Draggable>
)}
/>
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
