react-beautiful-dnd: State change causes weird behavior after drag end

Question

I have this table component where I'd like to be able to rearrange the rows of the table by dragging. I've managed to do that using react beautiful dnd the only issue is that some strange behavior happens after the drag ends (caused by state change/rerender). See below the image:

https://i.imgur.com/PjB7QgR.gif

    import React from "react";
    import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";

    const EditCategoryTable = ({
      onDragEnd,
      Articles,
      updateFieldChanged,
      setShowPopUp,
      deleteArticle,
    }) => {
      return (
        <table className="articles_table">
          <thead>
            <tr>
              <th style={{ width: "5%" }}></th>
              <th style={{ width: "55%" }}>Article</th>
              <th style={{ width: "20%" }}>Price</th>
              <th style={{ width: "10%" }}></th>
              <th style={{ width: "10%" }}></th>
            </tr>
          </thead>
          <DragDropContext onDragEnd={onDragEnd}>
            <Droppable droppableId="droppable-1">
              {(provided, _) => (
                <tbody ref={provided.innerRef} {...provided.droppableProps}>
                  {Articles.map((element, index) => (
                    <Draggable
                      key={element._id}
                      draggableId={"draggable-" + element._id}
                      index={index}
                    >
                      {(provided, snapshot) => (
                        <tr
                          ref={provided.innerRef}
                          {...provided.draggableProps}
                          style={{
                            ...provided.draggableProps.style,
                            boxShadow: snapshot.isDragging
                              ? "0 0 .4rem #666"
                              : "none",
                          }}
                        >
                          <td className="Movebuttons">
                            <i
                              className="fa-solid fa-bars"
                              {...provided.dragHandleProps}
                            ></i>
                          </td>

                          <td>
                            <input
                              className="articles_table_input"
                              type="text"
                              id="name"
                              name="name"
                              value={element.name || ""}
                              onChange={updateFieldChanged(index)}
                            />
                          </td>
                          <td>
                            <input
                              className="noscroll articles_table_input"
                              type="number"
                              id="price"
                              name="price"
                              value={element.price || ""}
                              onChange={updateFieldChanged(index)}
                            />
                          </td>
                          <td>
                            <i
                              class="fa-regular fa-pen-to-square fa-lg"
                              style={{ color: "#018a19" }}
                              onClick={() => setShowPopUp(index)}
                            ></i>
                          </td>
                          <td>
                            <i
                              class="fa-solid fa-trash fa-lg"
                              onClick={() => deleteArticle(index)}
                              style={{ color: "#454545" }}
                            ></i>
                          </td>
                        </tr>
                      )}
                    </Draggable>
                  ))}
                  {provided.placeholder}
                </tbody>
              )}
            </Droppable>
          </DragDropContext>
        </table>
      );
    };
    export default EditCategoryTable;