UseEffect with React-Table not displaying changes unless the page is refreshed

I made this codesandbox to test: https://codesandbox.io/s/confident-drake-e47wm?file=/src/MainTable.js

If you toggle line 9 and 10 in MainTable.js, you will toggle it working and not working. It seems when you put the data into local state (as you do because you are mapping it), it won’t re-render. Not exactly sure why this is, I’ve never used react-table, maybe it’s in the docs somewhere.

So I think you will either need to:

1. do the mapping in the parent and pass the data into MainTable already mapped, or
2. wrap MainTable in another component that does the mapping and again pass the data into MainTable already mapped
3. Maybe it could be done with a custom hook, I didn’t try that.