title: List items not staying in place using react-beautiful-dnd
body: <p>I'm using react-beautiful-dnd and copied the code from the tutorial to build a draggable list. It worked and looked like this: </p>
  
  <p><a href="https://i.stack.imgur.com/loXA2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/loXA2.png" alt="enter image description here"></a></p>
  
  <p>And here's the code that built this: <a href="https://github.com/DDavis1025/react-beautiful-dnd" rel="nofollow noreferrer">https://github.com/DDavis1025/react-beautiful-dnd</a></p>
  
  <p>However now I'm trying to implement my own list which is a playlist that uses the input to add songs from the user's computer to the list:</p>
  
  <p><a href="https://i.stack.imgur.com/Nb44G.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Nb44G.png" alt="enter image description here"></a></p>
  
  <p>It's partially working but I'm not able to drag the list item in place (It always goes back to the same order).
  Here is the code that I changed:</p>
  
  <p><strong>column-test.jsx</strong></p>
  
  <pre><code>export default class ColumnTest extends React.Component {
  constructor(props) {
      super(props);
  
      this.handleClick = this.handleClick.bind(this);
  
      this.inputRef = React.createRef();
  
      this.state = {
        files: [],
        audio: '',
      };
  
    }
  
  
  
  handleClick = event =&gt; {
  
    // Helper code to read file and return promise
    const readFile = (file) =&gt; {
  
      const fileList = [];
  
      const fileReader = new FileReader();
  
      // create the promise and return it
      return new Promise((resolve, reject) =&gt; {
  
        // if file reader has an error, report it
        fileReader.onerror = (error) =&gt; {
          reject({ error })
        }
  
        // if success, resolve the promise
        fileReader.onload = (e) =&gt; {
          resolve({
            name: file.name,
            link: e.target.result
          })
        }
  
        // start reading the file
        fileReader.readAsDataURL(file);
  
      })
    }
  
  
    // create all the file reader promises
    // create an array from the files list and use map to generate
    // an array of promises
    const allReaders = Array.from(event.target.files).map(readFile)
  
    // Now handle the array of promises we just created
    Promise.all(allReaders)
      .then(fileList =&gt; {
        console.log(fileList)
        // set the state that we have all the files
        this.setState({ files: fileList });
      })
      .catch(error =&gt; { 
         console.error(error)
      });
  
  
  }
  
  
  
  
  
    render() {
        return (
        &lt;div className="downloadMusic"&gt;
        &lt;div className="input"&gt;
          &lt;input
            onChange={this.handleClick}
            id="upload-file"
            className="inputName"
            type="file"
            multiple
            ref={this.inputRef}
          /&gt;
          &lt;/div&gt;
          &lt;div className="audio-player"&gt;
  
         &lt;audio
         controls
         autoPlay
         src={this.state.audio}
          /&gt;
           &lt;/div&gt;
  
  
  
          &lt;Container&gt;
             &lt;Title&gt;{this.props.column.title}&lt;/Title&gt;
             &lt;Droppable droppableId={this.props.column.id}&gt;
              {provided =&gt; (
               &lt;TaskList
                 ref={provided.innerRef} {...provided.droppableProps}&gt;
                {this.state.files.map((file, index) =&gt; (
                 &lt;TaskTest key={file.link} file={file} index={index} /&gt;
                ))}
                {provided.placeholder}
  
               &lt;/TaskList&gt;
  
               )}
              &lt;/Droppable&gt;
          &lt;/Container&gt;
  
          &lt;/div&gt;
          );
    }
  }
  </code></pre>
  
  <p>(This is where I add my input and fileReader to add files to my files array and iterate through those files using the .map() function in return() in render{})</p>
  
  <p><strong>task-test.jsx</strong></p>
  
  <pre><code>export default class TaskTest extends React.Component {
      render() {
          return (
            &lt;Draggable draggableId={this.props.file.link} index={this.props.index}&gt;
             {(provided, snapshot) =&gt; (
              &lt;Container
                {...provided.draggableProps}
                {...provided.dragHandleProps}
                ref={provided.innerRef}
                isDragging={snapshot.isDragging}
              &gt;
              {this.props.file.name}
              &lt;/Container&gt;
             )}
            &lt;/Draggable&gt;
            );
       }
  
  }
  </code></pre>