Как правильно перетащить в прокручиваемый родитель

Question

У меня есть небольшое приложение, которое я создаю, используя material-ui и beautiful-react-dnd. Я пытаюсь понять, почему я не могу изменить порядок строк в примере приложения ниже. Проблема возникает, когда ширина окна от среднего до маленького. Живой пример можно найти здесь: https://codesandbox.io/s/dnd-mui-scrollable-table-80s5u

import React, { useState } from "react";

import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
import Paper from "@material-ui/core/Paper";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";

function App() {
  const [countries, setCountries] = useState([
    "Belgium",
    "France",
    "Netherlands"
  ]);

  function handleDragEnd({ source, destination }) {
    if (!destination) {
      return;
    }

    if (source.index === destination.index) {
      return;
    }

    setCountries(prevCountries =>
      move(prevCountries, source.index, destination.index)
    );
  }

  function move(arr, from, to) {
    const clone = [...arr];
    Array.prototype.splice.call(
      clone,
      to,
      0,
      Array.prototype.splice.call(clone, from, 1)[0]
    );
    return clone;
  }

  return (
    <Paper style={{ overflow: "auto", padding: 20 }}>
      <DragDropContext onDragEnd={handleDragEnd}>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>Column</TableCell>
              <TableCell>Column</TableCell>
              <TableCell>Column</TableCell>
              <TableCell>Column</TableCell>
              <TableCell>Column</TableCell>
              <TableCell>Column</TableCell>
              <TableCell>Column</TableCell>
              <TableCell>Column</TableCell>
              <TableCell>Column</TableCell>
              <TableCell>Column</TableCell>
              <TableCell>Column</TableCell>
              <TableCell>Column</TableCell>
              <TableCell>Column</TableCell>
              <TableCell>Column</TableCell>
              <TableCell>Column</TableCell>
              <TableCell>Column</TableCell>
              <TableCell>Column</TableCell>
              <TableCell>Column</TableCell>
              <TableCell>Column</TableCell>
              <TableCell>Column</TableCell>
            </TableRow>
          </TableHead>
          <Droppable droppableId="table">
            {droppableProvided => (
              <TableBody
                innerRef={droppableProvided.innerRef}
                {...droppableProvided.droppableProps}
              >
                {countries.map((country, index) => (
                  <Draggable draggableId={country} index={index} key={country}>
                    {(provided, snapshot) => (
                      <TableRow
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                        innerRef={provided.innerRef}
                        isdragging={snapshot.isdragging}
                        style={{
                          ...provided.draggableProps.style
                        }}
                      >
                        <TableCell>{country} 1</TableCell>
                        <TableCell>{country} 2</TableCell>
                        <TableCell>{country} 3</TableCell>
                        <TableCell>{country} 4</TableCell>
                        <TableCell>{country} 5</TableCell>
                        <TableCell>{country} 6</TableCell>
                        <TableCell>{country} 7</TableCell>
                        <TableCell>{country} 8</TableCell>
                        <TableCell>{country} 9</TableCell>
                        <TableCell>{country} 10</TableCell>
                        <TableCell>{country} 11</TableCell>
                        <TableCell>{country} 12</TableCell>
                        <TableCell>{country} 13</TableCell>
                        <TableCell>{country} 14</TableCell>
                        <TableCell>{country} 15</TableCell>
                        <TableCell>{country} 16</TableCell>
                        <TableCell>{country} 17</TableCell>
                        <TableCell>{country} 18</TableCell>
                        <TableCell>{country} 19</TableCell>
                        <TableCell>{country} 20</TableCell>
                      </TableRow>
                    )}
                  </Draggable>
                ))}

                {droppableProvided.placeholder}
              </TableBody>
            )}
          </Droppable>
        </Table>
      </DragDropContext>
    </Paper>
  );
}

Похоже, проблема в элементе прокрутки <Paper />. Когда я удаляю стиль overflowX, перетаскивание работает правильно. Поскольку это большой стол, я бы предпочел сохранить горизонтальную прокрутку без изменений. Кроме того, документация предполагает, что с одним прокручиваемым родителем все должно быть в порядке.

Любая помощь очень ценится.