title: react-table not rendering data in the initial load and after page refresh
body: <p>I am trying to render table data from API using fetch, following is the code snippet, table display data disappears if navigate to a different page or refresh the page. Any help is appreciated.</p>
  <p>Ref Video: <a href="https://watch.screencastify.com/v/EwWkC48SDpulXvRltTdS" rel="nofollow noreferrer">https://watch.screencastify.com/v/EwWkC48SDpulXvRltTdS</a></p>
  <pre><code>import { useState, useMemo, useEffect } from &quot;react&quot;;
  import { useTable } from &quot;react-table&quot;;
  
  const TableData = () =&gt; {
    const [columns, setColumns] = useState([]);
    const [data, setData] = useState([]);
    const tableInstance = useTable({ columns, data });
    const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
      tableInstance;
  
    useEffect(() =&gt; {
      async function fetchData() {
        try {
          // Fetch columns
          let colArr = [];
          let responseCol = await fetch(&quot;/api/columns&quot;);
          responseCol = await responseCol.json();
          responseCol.forEach((record) =&gt; {
            let recordObject = {
              Header: `${record.label}`,
              accessor: `${record.value}`,
            };
            colArr.push(recordObject);
          });
          setColumns(colArr);
          // Fetch Rows
          let rowArr = [];
          let rowObj = {};
          let responseRow = await fetch(&quot;/api/rows&quot;);
          responseRow = await responseRow.json();
          rowArr.length = 0;
          responseRow.records.forEach((record) =&gt; {
            columns.forEach((column) =&gt; {
              rowObj[`${column.accessor}`] = `${record[column.accessor]}`;
            });
            console.log(&quot;RowObj &quot;, rowObj);
            rowArr.push(rowObj);
            rowObj = {};
            console.log(&quot;RowArr &quot;, rowArr);
          });
          setData(rowArr);
        } catch (e) {
          console.log(e.message);
        }
      }
      fetchData();
    }, []);
  
    return (Rendering table)
  </code></pre>
  <p>Columns &amp; Rows are fetched from nextjs api, please let me know for more information.</p>