Can't re-order speakers when there is more than one row

[cjyabraham]

Re-ordering speakers in the editor by dragging-dropping doesn't seem to work well. When there are multiple rows of speakers it always wants to position the dragged item in the first row.

[cjyabraham]

I looked into this a bit. It seems like the package we are using for drag-n-drop react-beautiful-dnd is no longer supported and has an open issue about sorting multi-row lists. People are recommending react-sortable-hoc instead. The react-select component we are using also recommends using react-sortable-hoc and has some sample code here.

So I suggest we swap out react-beautiful-dnd for react-sortable-hoc.

[cjyabraham]

It turns out react-sortable-hoc is also no longer supported so we went with dnd-kit in the end. Instructions for how to integrate dnd-kit with react-select are in this PR with code example.