title: React-table: State doesn't change as expected, and table doesn't update
body: <p>Codesandbox example: <a href="https://codesandbox.io/s/react-table-state-not-updating-hmquq?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/react-table-state-not-updating-hmquq?file=/src/App.js</a></p>
  
  <p>I am using the <a href="https://www.npmjs.com/package/react-table" rel="nofollow noreferrer">react-table</a> package (version 7.1.0).</p>
  
  <p>I have a table which displays some invoices like so: </p>
  
  <p><a href="https://i.stack.imgur.com/IsMz4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IsMz4.png" alt="table example"></a></p>
  
  <p>The user should be able to select some or all of these items using the <code>selected</code> checkbox.</p>
  
  <p>The <code>selected</code> field is not part of the data. However, when the user hits a <code>selected</code> checkbox, the field should toggle and an array storing document numbers should be populated.</p>
  
  <p>To store the document numbers, I have a stateful getter and setter:</p>
  
  <pre><code>const [selectedInvoiceIds, setSelectedInvoiceIds] = useState([]);
  </code></pre>
  
  <p>To populate the field, I am attempting to simply add the document number to the array immutably, from the <code>onChange</code> of the checkbox:</p>
  
  <pre><code>      {
          Header: "Selected",
          accessor: "selected",
          Cell: item =&gt; {
            const { documentNumber } = item.row.values;
            return (
              &lt;input
                type="checkbox"
                checked={selectedInvoiceIds.includes(documentNumber)}
                onChange={() =&gt; {
                  setSelectedInvoiceIds([...selectedInvoiceIds, documentNumber]);
                }}
              /&gt;
            );
          }
        }
  </code></pre>
  
  <p>When a checkbox is clicked for the first time, the <code>selectedInvoiceIds</code> becomes populated:</p>
  
  <pre><code>selectedInvoiceIds: ["706942"]
  </code></pre>
  
  <p><strong>The problems are</strong>:</p>
  
  <ul>
  <li>The table does not update to reflect the state change, despite this prop on the checkbox:</li>
  </ul>
  
  <pre><code>checked={selectedInvoiceIds.includes(documentNumber)}
  </code></pre>
  
  <ul>
  <li>The <code>selectedInvoiceIds</code> value gets <strong>overwritten</strong> when another document number is added, instead of being added to, as if the state is re-initialising to <code>[]</code> somewhere in between.</li>
  </ul>
  
  <p>Can it be explained why these state issues are occurring and how to get around it?</p>
  
  <p>I am aware of the <code>useTableState</code> value exposed by react-table, but I don't know how I can apply it to this use case.</p>
  
  <p>Codesandbox example: <a href="https://codesandbox.io/s/react-table-state-not-updating-hmquq?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/react-table-state-not-updating-hmquq?file=/src/App.js</a></p>