react-sortable-hoc List disappears when I drag an element

Question

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

I googled some issues and the only disappearing related issues I found were when people used it on a modal and they talked about setting the z-index to fix it. i tried it anyway still nothing. How can I fix this?

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}} />
    );
  }
}   


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

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

Answer 1

Every sortableElement should have it's own index prop:

<PlaylistPage key={index} index={index} page={page} style={{zIndex: 99999999}} />

Here is the update to your jsfiddle:
https://jsfiddle.net/40vpaLj5/1/