title: Draggables grouped together on drag
body: <p>I'm using the react-beautiful-dnd library to enable drag and drop functionality for lists, but I'm having trouble dropping the elements. Sometimes some of the draggables group together, and I can't drop anything between them. It looks like all of the index are unique. Why are the items being grouped together? Any help would be greatly appreciated.</p>
  <p><a href="https://i.stack.imgur.com/nnkNS.gif" rel="nofollow noreferrer">Link to image of drag behavior</a></p>
  <p>These are my render methods from the three React components used in the DragDropContext</p>
  <p>Cookbook.js<br />
  ...</p>
  <pre><code>render(){
      console.log(&quot;rerendering cookbook&quot;);
      let cookbook;
  
      // choose which cookbook to use
      if (this.state.searchbarValue === ''){
          cookbook = this.state.cookbook;
      } else {
          cookbook = this.state.filteredCookbook;
      }
  
      return (
          &lt;div className=&quot;App&quot;&gt;
              &lt;Header /&gt;
              &lt;div id=&quot;dialogWindow&quot;&gt;
                  {this.state.showAddChapter &amp;&amp; &lt;AddChapterDialog showAddChapterDialog={this.displayAddChapterWindow} rerenderCookbook={this.rerenderCookbook}/&gt;}
                  {this.state.showAddRecipe &amp;&amp; &lt;AddRecipeDialog showAddRecipeDialog={this.displayAddRecipeWindow} rerenderCookbook={this.rerenderCookbook}/&gt;}
              
              &lt;/div&gt;
              &lt;div id=&quot;customContextWindow&quot;&gt;
                  {this.state.showContextMenu &amp;&amp; &lt;CustomContextMenu showContextMenu={this.displayContextMenu} renameItem={(bool) =&gt; {console.log(bool); this.displayRenameDialog(bool)}} deleteItem={this.displayDeleteDialog}/&gt;}
              &lt;/div&gt;
              &lt;div id=&quot;smallDialogWindow&quot;&gt;
                  {this.state.showRename &amp;&amp; &lt;RenameChapterRecipeDialog showRenameChapterRecipeDialog={this.displayRenameDialog} itemTypeToModify={this.state.itemTypeToModify} textToModify={this.state.textToModify} recipeChapter={this.state.recipeChapter} rerenderCookbook={this.rerenderCookbook} /&gt;}
                  {this.state.showDelete &amp;&amp; &lt;DeleteChapterRecipeDialog showDeleteChapterRecipeDialog={this.displayDeleteDialog} itemTypeToDelete={this.state.itemTypeToModify} textToDelete={this.state.textToModify} recipeChapter={this.state.recipeChapter} rerenderCookbook={this.rerenderCookbook} /&gt;}
              &lt;/div&gt;
              &lt;input type=&quot;text&quot; id=&quot;search-bar&quot; placeholder=&quot;Search recipes&quot; value={this.state.searchbarValue} onChange={this.handleSearchBarChange}&gt;&lt;/input&gt;
              &lt;div id=&quot;cookbook&quot;&gt;
                  &lt;DragDropContext onDragEnd={this.handleOnDragEnd}&gt;
                  { cookbook.length &gt; 0 &amp;&amp;
                     &lt;ul&gt;
                              { cookbook.map((chapter, index) =&gt; 
                                  &lt;Chapter name={chapter.chapterName} recipes={chapter.recipes} rightClick={ (event)=&gt;{this.showMenu(event);} } index={index}/&gt;
                              )} 
                      
                      &lt;/ul&gt;
                  }    
                  { (cookbook.length === 0 &amp;&amp; this.state.searchbarValue !== '') &amp;&amp;
                     &lt;div id=&quot;empty-search-results&quot;&gt;No recipes found&lt;/div&gt;
                  }         
                   &lt;/DragDropContext&gt;  
  
              &lt;/div&gt;
              {!this.state.cookiesAccepted &amp;&amp; &lt;CookiePopupWarning accepted={this.state.cookiesAccepted} showCookiePopupWarning={(bool) =&gt; {this.showCookiePopupWarning(bool)}}/&gt;}
              &lt;div className=&quot;add-bar flex-container&quot;&gt;
                  &lt;div id=&quot;add-chapter&quot; className=&quot;add-btn&quot; onClick={() =&gt; this.displayAddChapterWindow(true)}&gt;&lt;div className=&quot;add-sign&quot;&gt;+&lt;/div&gt;Add chapter&lt;/div&gt;&lt;div id=&quot;add-recipe&quot; className=&quot;add-btn&quot; onClick={()=&gt;{ this.displayAddRecipeWindow(true) }}&gt;&lt;div className=&quot;add-sign&quot;&gt;+&lt;/div&gt;Add recipe&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  <p>Chapter.js<br />
  ...</p>
  <pre><code>render(){
      let chapterExpanded;
      if (this.props.recipes.length === 0){  // if no recipes, don't show toggle 
          chapterExpanded=&quot;none&quot;;
      } else {  // otherwise expand chapter
          chapterExpanded=&quot;true&quot;;
      }
  
      return (
          &lt;Droppable droppableId={this.props.name}&gt;
              {(provided) =&gt; (
          &lt;div {...provided.droppableProps} ref={provided.innerRef} className=&quot;droppable-div&quot; &gt;
              &lt;li itemType=&quot;chapter&quot; ref={this.chapterRef} chapterExpanded={chapterExpanded} onClick={()=&gt;{this.toggleChapter();}}  onContextMenu={(event)=&gt;{this.props.rightClick(event); event.preventDefault();}} &gt;{this.props.name}&lt;/li&gt;
              &lt;ul ref={this.recipesRef} chapterOpen=&quot;true&quot;&gt;
                  {this.props.recipes.map((recipe, index) =&gt; 
                      &lt;Recipe content={recipe} key={recipe._id} chapter={this.props.name} index={`${index}`} sendRightClick={(event)=&gt;{this.props.rightClick(event); event.preventDefault();}}/&gt;
                  )}
              {provided.placeholder}
              &lt;/ul&gt;
          &lt;/div&gt;
          )}
          &lt;/Droppable&gt;
      );
  }
  </code></pre>
  <p>Recipe.js<br />
  ...</p>
  <pre><code>render(){
  
      let chapter = this.props.chapter;
      let recipeId = this.props.content.nameId;
  
      return (
          &lt;Draggable key={recipeId} draggableId={recipeId} index={this.props.index}&gt;
              {(provided)=&gt;(
                  &lt;div className='recipe' ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}&gt;
                      &lt;div&gt;
                          &lt;li recipeType={this.props.content.method} chapterName={chapter} link={this.recipe.recipeLink} itemType=&quot;recipe&quot; onClick={()=&gt;{this.displayRecipe()}} onContextMenu={(event)=&gt;{this.props.sendRightClick(event)}}&gt;{this.recipe.name}&lt;/li&gt;
                          &lt;img className=&quot;recipe-icon&quot; src={notesImg} onClick={()=&gt;{this.showNotes()}}/&gt;
                      &lt;/div&gt;
                      &lt;textarea className=&quot;cookbook-notes&quot; notesOpen={this.state.notesOpen} disabled={this.state.notesDisabled} value={this.state.notes} onChange={(event)=&gt;{this.accessNotes.updateNotes(event, chapter, recipeId); this.setState({notes: event.target.value});}}&gt;&lt;/textarea&gt;
                  &lt;/div&gt;
              )}
          &lt;/Draggable&gt;
      );
  }
  </code></pre>