title: using react-dnd beautiful how do I insert new item into the array, or does it not work?
body: <p>In my project I am trying to change my information into react-dnd beutiful drag and drop.</p>
  <p>But as i changed it, the drag and drop does not work for new items inserted into the array.</p>
  <p>How do I make it so that it works still in this example?</p>
  <p>code sandbox:
  <a href="https://codesandbox.io/s/react-drag-and-drop-react-beautiful-dnd-forked-oo8nd?file=/src/index.js:0-5732" rel="nofollow noreferrer">https://codesandbox.io/s/react-drag-and-drop-react-beautiful-dnd-forked-oo8nd?file=/src/index.js:0-5732</a></p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import { DragDropContext, Droppable, Draggable } from &quot;react-beautiful-dnd&quot;;
  
  // fake data generator
  const getItems = (count, offset = 0) =&gt;
    Array.from({ length: count }, (v, k) =&gt; k).map((k) =&gt; ({
      id: `item-${k + offset}-${new Date().getTime()}`,
      content: `item ${k + offset}`
    }));
  
  const reorder = (list, startIndex, endIndex) =&gt; {
    const result = Array.from(list);
    const [removed] = result.splice(startIndex, 1);
    result.splice(endIndex, 0, removed);
  
    return result;
  };
  
  /**
   * Moves an item from one list to another list.
   */
  const move = (source, destination, droppableSource, droppableDestination) =&gt; {
    const sourceClone = Array.from(source);
    const destClone = Array.from(destination);
    const [removed] = sourceClone.splice(droppableSource.index, 1);
  
    destClone.splice(droppableDestination.index, 0, removed);
  
    const result = {};
    result[droppableSource.droppableId] = sourceClone;
    result[droppableDestination.droppableId] = destClone;
  
    return result;
  };
  const grid = 8;
  
  const getItemStyle = (isDragging, draggableStyle) =&gt; ({
    // some basic styles to make the items look a bit nicer
    userSelect: &quot;none&quot;,
    padding: grid * 2,
    margin: `0 0 ${grid}px 0`,
  
    // change background colour if dragging
    background: isDragging ? &quot;lightgreen&quot; : &quot;grey&quot;,
  
    // styles we need to apply on draggables
    ...draggableStyle
  });
  const getListStyle = (isDraggingOver) =&gt; ({
    background: isDraggingOver ? &quot;lightblue&quot; : &quot;lightgrey&quot;,
    padding: grid,
    width: 250
  });
  
  function QuoteApp() {
    const [state, setState] = useState([getItems(10), getItems(5, 10)]);
  
    function onDragEnd(result) {
      const { source, destination } = result;
  
      // dropped outside the list
      if (!destination) {
        return;
      }
      const sInd = +source.droppableId;
      const dInd = +destination.droppableId;
  
      if (sInd === dInd) {
        const items = reorder(state[sInd], source.index, destination.index);
        const newState = [...state];
        newState[sInd] = items;
        setState(newState);
      } else {
        const result = move(state[sInd], state[dInd], source, destination);
        const newState = [...state];
        newState[sInd] = result[sInd];
        newState[dInd] = result[dInd];
  
        setState(newState.filter((group) =&gt; group.length));
      }
    }
  
    return (
      &lt;div&gt;
        &lt;button
          type=&quot;button&quot;
          onClick={() =&gt; {
            setState([...state, []]);
          }}
        &gt;
          Add new group
        &lt;/button&gt;
        &lt;button
          type=&quot;button&quot;
          onClick={() =&gt; {
            setState([...state, getItems(1)]);
          }}
        &gt;
          Add new item
        &lt;/button&gt;
        &lt;div style={{ display: &quot;flex&quot; }}&gt;
          &lt;DragDropContext onDragEnd={onDragEnd}&gt;
            {state.map((el, ind) =&gt; (
              &lt;Droppable key={ind} droppableId={`${ind}`}&gt;
                {(provided, snapshot) =&gt; (
                  &lt;div
                    ref={provided.innerRef}
                    style={getListStyle(snapshot.isDraggingOver)}
                    {...provided.droppableProps}
                  &gt;
                    {el.map((item, index) =&gt; (
                      &lt;Draggable
                        key={item.id}
                        draggableId={item.id}
                        index={index}
                      &gt;
                        {(provided, snapshot) =&gt; (
                          &lt;div
                            ref={provided.innerRef}
                            {...provided.draggableProps}
                            {...provided.dragHandleProps}
                            style={getItemStyle(
                              snapshot.isDragging,
                              provided.draggableProps.style
                            )}
                          &gt;
                            &lt;div
                              style={{
                                display: &quot;flex&quot;,
                                justifyContent: &quot;space-around&quot;
                              }}
                            &gt;
                              ind:{ind} , index{index} ,{item.content}
                              &lt;button
                                type=&quot;button&quot;
                                onClick={() =&gt; {
                                  const newState = [...state];
                                  newState[ind].splice(index, 1);
                                  setState(
                                    newState.filter((group) =&gt; group.length)
                                  );
                                }}
                              &gt;
                                delete
                              &lt;/button&gt;
                              &lt;button
                                type=&quot;button&quot;
                                onClick={() =&gt; {
                                  const newState = [...state];
                                  newState[ind].splice(
                                    index,
                                    0,
                                    getItems(1, index)
                                  );
                                  setState(
                                    newState.filter((group) =&gt; group.length)
                                  );
                                }}
                              &gt;
                                add s/o
                              &lt;/button&gt;
                            &lt;/div&gt;
                          &lt;/div&gt;
                        )}
                      &lt;/Draggable&gt;
                    ))}
                    {provided.placeholder}
                  &lt;/div&gt;
                )}
              &lt;/Droppable&gt;
            ))}
          &lt;/DragDropContext&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  const rootElement = document.getElementById(&quot;root&quot;);
  ReactDOM.render(&lt;QuoteApp /&gt;, rootElement);
  </code></pre>
  <p>The specific change is the &quot;add s/o&quot; button</p>
  <p>Thankyou for your time</p>