React-sortable-hoc: When I drag an element, the list disappears (JSFiddle included)

[DaleForSingular]

Hi there. No matter what I do, once I drag an element from the list, the rest of the list seems to disappear. I googled a solution and there are some issues if it's on a Modal, but my code is not in a modal. I did try setting the z-index really high but that didn't work either.

Is this a known issue? The rest of the list disappears not after I mouse down click the element, but the second i drag it, the rest of the list disappears.

FIDDLE: https://jsfiddle.net/40vpaLj5/

import React from 'react';
import PlaylistPages from './PlaylistPages';

class PlaylistSortableComponent extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      test: [
        '1','2', '3', '4'
      ]
    }
  }

  render() {
    return (
      <PlaylistPages pages={this.state.test} style={{zIndex: 999999}} />
    );
  }
}

export default PlaylistSortableComponent;

---

const PlaylistPages = SortableContainer(({pages}) => {
  return (
    <div>
      {
        pages.map((page, index) =>
          <PlaylistPage key={index} page={page} style={{zIndex: 99999999}} />
      )}
    </div>
  );
});

export default PlaylistPages;

---

const PlaylistPage = SortableElement(({page}) => {
  return (
    <div style={{zIndex: 99999999}} >{page}</div>
  );
});

[MichaelA59]

What was the solution to this?

[DaveBben]

Make sure that you have the index prop specified.
<Stage key={item-${index}} index={index}/>