Порядок столбцов в React Table

Question

Я пытаюсь использовать переупорядочение столбцов для таблицы React, но когда я это делаю, я получаю предупреждение

Please be sure to add the {provided.placeholder} React Node as a child of your Droppable.

Хотя в документации говорится, что этот метод был устарело. Я не уверен, что я делаю неправильно или почему это не работает.

В примере, который я использовал, все работает точно так же, и он работает. https://codesandbox.io/s/gargroh-v7-drag-column-beautiful-react-dnd-encww?file= / src / App. js

const getItemStyle = ({ isDragging, isDropAnimating }, draggableStyle) => ({
  ...draggableStyle,

  userSelect: "none",


  ...(!isDragging && { transform: "translate(0,0)" }),
  ...(isDropAnimating && { transitionDuration: "0.001s" })

});

export default function Table({ columns, data, header, subheader }) {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    flatColumns,
    setColumnOrder,

  } = useTable({
    columns,
    data,
  },
    useSortBy,
    useRowSelect,
    useColumnOrder,
  )

  const currentColOrder = React.useRef();

  return (
    <>
      <Header>{header}</Header>
      <SubHeader>{subheader}</SubHeader>
      <StyledTable {...getTableProps()}>
        <thead>
          {headerGroups.map(headerGroup => (
            <DragDropContext
              onDragStart={() => {
                currentColOrder.current = flatColumns.map(o => o.id);
              }}
              onDragUpdate={(dragUpdateObj) => {

                const colOrder = [...currentColOrder.current];
                const sIndex = dragUpdateObj.source.index;
                const dIndex =
                  dragUpdateObj.destination && dragUpdateObj.destination.index;

                if (typeof sIndex === "number" && typeof dIndex === "number") {
                  colOrder.splice(sIndex, 1);
                  colOrder.splice(dIndex, 0, dragUpdateObj.draggableId);
                  setColumnOrder(colOrder);
                }
              }}
            >
              <Droppable droppableId="droppable" direction="horizontal">
                {(droppableProvided) => (
                  <tr
                    {...headerGroup.getHeaderGroupProps()}
                    ref={droppableProvided.innerRef}
                    
                  >
                    {headerGroup.headers.map((column, index) => (
                      <Draggable
                        key={column.id}
                        draggableId={column.id}
                        index={index}
                        isDragDisabled={!column.accessor}
                      >
                        {(provided, snapshot) => {
                          return (
                            <th 
                              {...column.getHeaderProps(column.getSortByToggleProps())}
                              className="row header-group"
                            >
                              <StyledHeader
                                {...column.isSorted ? (
                                  column.isSortedDesc ? (
                                    <Image src={DropDownArrowUp} alt="fireSpot" />
                                  ) : (
                                    <Image src={DropDownArrow} alt="fireSpot" />
                                  )
                                  ) : (
                                    ''
                                  )}
                                {...provided.draggableProps}
                                {...provided.dragHandleProps}
                                ref={provided.innerRef}
                          
                                style={{
                                  ...getItemStyle(
                                    snapshot,
                                    provided.draggableProps.style
                                  )
                                }}
                              >
                                {column.render("Header")}
                              </StyledHeader>
                            </th>
                          );
                        }}
                      </Draggable>
                    ))}
                  </tr>
                )}
              </Droppable>
            </DragDropContext>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map(row => {
            prepareRow(row);
            return (
              <StyledTr {...row.getRowProps()}>
                {row.cells.map(cell => {
                  return (
                    <td {...cell.getCellProps()}>
                      {cell.render('Cell')}
                    </td>
                  );
                })}
              </StyledTr> || (
                <tbody {...getTableBodyProps()}>
                  {rows.map(row => {
            prepareRow(row);
            return (
              <StyledTr {...row.getRowProps()}>
                {row.cells.map(cell => {
                  return (
                    <td {...cell.getCellProps()}>
                      {cell.render('Cell')}
                    </td>
                  );
                })}
              </StyledTr>
            );
          })}
                </tbody>
              )
            );
          })}
        </tbody>
      </StyledTable>
    </>
  );
}