Using react-sortable-hoc to sort rows in CSS grid with Drag Handle

I'm trying to use react-sortable-hoc to sort rows in a CSS grid. In order for the grid to layout, all the grid cells must be direct descendants of the grid element. Good resource on this is https://css-tricks.com/snippets/css/complete-guide-grid/

E.g.,
```

Because of this, my SortableElement has to be a Fragment which returns the elements without a row container. However when I do this and drag from the draghandle, the ghost element shows only the drag handle and not the other elements which were inside the fragment.

Is there anything I can do to get around this?

https://codesandbox.io/s/polished-river-8mvng?file=/src/index.js

Start with the provided CodeSandbox reproduction at src/index.js and verify how the fragment-based SortableElement behaves when dragging from its handle. Read the reproduction and react-sortable-hoc's drag-ghost behavior first; done means the dragged ghost includes all grid cells while preserving the CSS grid's direct-child structure.

Written by the indexing model from the issue text.