title: React-Beautiful-dnd element not saving location after drag
body: <p>I have a single column(list) filled with cards that I want to re-arrange by dragging and dropping. I am able to drag my items within the list and drop them in new locations but as soon as I drop the item into the new location its position is not being saved. I can't seem to figure out what is wrong with my onDragEnd function:</p>
  <pre><code>import React, {Component, useState} from 'react';
  import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
  import Search from &quot;Components/Search&quot;;
  
  export default class Dashboards extends Component {
    constructor(props) {
      super(props);
      this.onDragEnd = this.onDragEnd.bind(this);
      this.state = {
        showVisualModal: false,
        currentVisual: {},
        visuals: this.props.visuals,
        searchFilter: undefined,
      }
    }
  </code></pre>
  <pre><code>              &lt;DragDropContext onDragEnd={this.onDragEnd}&gt;
                  &lt;Droppable droppableId=&quot;column1&quot;&gt;
                    {(provided, snapshot) =&gt; (
                        &lt;div className={styles.column1} {...provided.droppableProps}
                      ref={provided.innerRef}  style={{ backgroundColor: snapshot.isDraggingOver ? 'rgba(36,125,184,0.1)' : 'white', transition: 'backgroundColor .2s ease' }}&gt;
                    {visuals.body.length &gt; 0 &amp;&amp; visuals.body.map((visual, index) =&gt; {
                      visual.filters = this.props.watchers.filter(x =&gt; x.watcher_id === visual.watcher_id)[0]?.filter;
                      return (
                          &lt;Draggable key={visual.chart_id} draggableId={visual.chart_id} index={index}&gt;
                            {(provided) =&gt; (
                                &lt;div
                                    ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps} &gt;
                                  &lt;Visual
                                      key={index}
                                      intl={this.props.intl}
                                      visual={visual}
                                      updateData={this.getData}
                                      deleteFcn={this.deleteVisual}
                                      editModalFcn={this.showEditModal}
                                      watcherType={this.props.watchers.filter(x =&gt; x.watcher_id === visual.watcher_id)[0]?.watcher_type}
                                  /&gt;&lt;/div&gt;)}
                          &lt;/Draggable&gt;);
                          })}
                          {provided.placeholder}
                        &lt;/div&gt;
                    )}
                  &lt;/Droppable&gt;
                &lt;/DragDropContext&gt;
  {...}
  
    Dashboards.propTypes = {};
  </code></pre>
  <pre><code>  onDragEnd = (result) =&gt; {
      console.log(result)
      const {destination, source, draggableId} = result;
      if (!destination) {
        return;
      }
      if (
          destination.droppableId === source.droppableId &amp;&amp;
          destination.index === source.index
      ) {
        return;
      }
      const start = this.state.visuals[source.droppableId];
      const finish = this.state.visuals[destination.droppableId];
  
      if (start === finish) {
        const newTopicIds = Array.from(start.visual);
        newTopicIds.splice(source.index, 1);
        newTopicIds.splice(destination.index, 0, draggableId);
  
        const newProject = {
          ...start,
          topicIds: newTopicIds,
        };
  
        const newState = {
          ...this.state,
          projects: {
            ...this.state.projects,
            [newProject.id]: newProject
          }
        }
  
        this.setState(newState);
        return
      }
    }
  </code></pre>