title: React Table not displaying new data
body: <p>I am retrieving data from mongoDb via GET API for different values. But when the data gets populated for one value, it does not populate the table with new data for new value. The table just displays old data for old value, even if I am receiving new data for new value from the back end.
  Below is my code :</p>
  <p><strong>ItemService.js</strong></p>
  <pre><code>import axios from 'axios';
  
  const MUSIC_ITEM_API_BASE_URL = &quot;http://localhost:8081/&quot;;
  
  
      function getAllItemsByBrand(brand){
  
          var params = new URLSearchParams();
          params.append(&quot;page&quot;, 0);
          params.append(&quot;size&quot;, 5);
  
          var request = {
              params: params
          };
  
          const promise = axios.get(`http://localhost:8082/getAllItemsByBrand/${brand}`,request)
              .then(function (response) {
                  return response.data;
          }).catch(
              function (error) {
                  console.log(error)
              }
          );
  
          return promise
      }
  
      const getItemByAsin= (asin) =&gt; {
          return axios.get(MUSIC_ITEM_API_BASE_URL + '/getItemByAsin/' + asin);
      }
  
  
  
  export default {
      getAllItemsByBrand,
      getItemByAsin
  }
  </code></pre>
  <p>You can choose to ignore &quot;getItemByAsin&quot; as I am currently not using that function for now. Please focus only on &quot;getAllItemsByBrand&quot; function.</p>
  <p><strong>ItemList.js</strong></p>
  <pre><code>import { useRef, useState,useEffect } from &quot;react&quot;;
  import React from &quot;react&quot;;
  import ReactDOM from 'react-dom';
  import ItemService from '../services/ItemService'
  import ItemTable from &quot;./PopulateTable&quot;;
  
      function FetchData(){
  
          // Render the UI for your table
  
          const [brand, setBrand] = useState('');
  
  
          const inputRef = useRef();
          let apiData;
  
          const submitHandler = (e) =&gt; {
              e.preventDefault();
              setBrand(inputRef.current.value);
              apiData = ItemService.getAllItemsByBrand(inputRef.current.value);
              const p = Promise.resolve(apiData);
              p.then(function(v) {
                  console.log(v[&quot;Items&quot;])
                  const element = &lt;ItemTable brandData={v[&quot;Items&quot;]}/&gt;;
                  ReactDOM.render(element, document.getElementById('list'))
              });
  
          };
  
          return (
              &lt;div className=&quot;App&quot;&gt;
                  &lt;form onSubmit={submitHandler}&gt;
                      &lt;input ref={inputRef} /&gt;
                      &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
                          &lt;div style={{display: 'flex',  justifyContent:'center', alignItems:'center', height: '40vh'}} id=&quot;list&quot;/&gt;
                  &lt;/form&gt;
  
  
  
              &lt;/div&gt;
          );
      };
  
  
      export default FetchData
  </code></pre>
  <p>I am getting new data for new value using <strong>&quot;console.log(v[&quot;Items&quot;])&quot;</strong> inside <strong>submitHandler</strong></p>
  <p><strong>PopulateTable.js</strong></p>
  <p>Here is where the problem is occuring:</p>
  <pre><code>import React, {useState,useRef} from 'react'
  import styled from 'styled-components'
  import { useTable, useFilters, useGlobalFilter, useAsyncDebounce } from 'react-table'
  import matchSorter from 'match-sorter'
  
  
      const Styles = styled.div`
        padding: 1rem;
      
        table {
          border-spacing: 0;
          border: 1px solid black;
      
          tr {
            :last-child {
              td {
                border-bottom: 0;
              }
            }
          }
      
          th,
          td {
            margin: 0;
            padding: 0.5rem;
            border-bottom: 1px solid black;
            border-right: 1px solid black;
      
            :last-child {
              border-right: 0;
            }
          }
        }
      `;
  
      function Table({columns, data}) {
  
          // Use the state and functions returned from useTable to build your UI
          const {
              getTableProps,
              getTableBodyProps,
              headerGroups,
              rows,
              prepareRow,
          } = useTable({
              columns,
              data,
          });
  
          // Render the UI for your table
          return (
              &lt;table {...getTableProps()}&gt;
                  &lt;thead&gt;
                  {headerGroups.map(headerGroup =&gt; (
                      &lt;tr {...headerGroup.getHeaderGroupProps()}&gt;
                          {headerGroup.headers.map(column =&gt; (
                              &lt;th {...column.getHeaderProps()}&gt;{column.render('Header')}&lt;/th&gt;
                          ))}
                      &lt;/tr&gt;
                  ))}
                  &lt;/thead&gt;
                  &lt;tbody {...getTableBodyProps()}&gt;
                  {rows.map((row, i) =&gt; {
                      prepareRow(row)
                      return (
                          &lt;tr {...row.getRowProps()}&gt;
                              {row.cells.map(cell =&gt; {
                                  return &lt;td {...cell.getCellProps()}&gt;{cell.render('Cell')}&lt;/td&gt;
                              })}
                          &lt;/tr&gt;
                      )
                  })}
                  &lt;/tbody&gt;
              &lt;/table&gt;
          )
      }
  
      function ItemTable(props) {
  
          const columns = React.useMemo(
              () =&gt; [
                  {
                      Header: 'Item details',
                      columns: [
                          {
                              Header: 'Date',
                              accessor: 'date',
                          },
                          {
                              Header: 'Title',
                              accessor: 'title',
                          },
                          {
                              Header: 'Main category',
                              accessor: 'main_cat',
                          },
                          {
                              Header: 'Brand',
                              accessor: 'brand',
                          },
                          {
                              Header: 'Item ID',
                              accessor: 'asin',
                          }
                      ],
                  }
              ],
              []
          );
  
          const data = React.useMemo(() =&gt; props.brandData, []);
          console.log(props.brandData)
          return (
            &lt;Styles&gt;
              &lt;Table columns={columns} data={data} /&gt;
            &lt;/Styles&gt;
          )
  }
  export default ItemTable
  
  </code></pre>
  <p><strong>console.log(props.brandData)</strong> is also giving the updated data for new value.
  I am not able to update the value of the <strong>data</strong> variable.
  <strong>(P.S. refer const data = React.useMemo(() =&gt; props.brandData, []);)</strong></p>
  <p>Am I missing something here ? Please suggest.</p>