Filter issue on table Data fetched from API

[DeekshithBanjan]

Hi, I have used a React state "rowData" to store data and send it as props to MaterialReactTable.

const [rowData, setRowData] = useState([]);

If I set the already available JSON data to this rowData, the table displays the proper data and filters it. However, when we fetch the JSON data from API and set it to rowData, the table displays the proper data, but the filter doesn't work properly.

<MaterialReactTable columns={columns} data={data} enableRowSelection enableColumnResizing enableGrouping enableStickyHeader enableStickyFooter enableMultiSort initialState={{ density: "compact", pagination: { pageIndex: 0, pageSize: 20 }, }} />

[KevinVandy]

Elaborate "doesn't work properly" or give a reproducable example

[DeekshithBanjan]

Sorry, but the issue seems to be with the columns array. Here is the codesandbox link as an example. The filter works properly if you set the columnLabels outside TableContainer. However, if you try to set columnLabels as a state inside useEffect, filter doesn't work.

https://codesandbox.io/s/determined-wing-e04e0h?file=/src/tableContainer.js:453-467

When you set columnLabels as variable outside function:

When you set columnLabels state inside useEFfect: