Revalidating in NextJS when grouping is enabled causes an issue

[lanzclintonv]

material-react-table version

2.13.0

react & react-dom versions

18

Describe the bug and the steps to reproduce it

When enableGrouping is set true and a revalidation of data was triggered, this error would occur:

Warning: Can't perform a React state update on a component that hasn't mounted yet. This indicates that you have a side-effect in your render function that asynchronously later calls tries to update the component. Move this work to useEffect instead.

It would also cause the whole table to re-render, causing any filters to reset.

Steps to reproduce the errors.

1. Create the data used for the table, should be an API coming from a fetch request with a tag on it.
2. Create a table with enableGrouping: true in the table.
3. Create a button / event that would revalidate the tag of the data's fetch.
4. Check the console for the error.

Note: Not enabling grouping will not cause this error to appear. The error will only occur at the first revalidation. It will not appear to succeeding revalidation.

Check CodeSandbox below for sample.

Minimal, Reproducible Example - (Optional, but Recommended)

CodeSandbox

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

Maybe, I'll investigate and start debugging

Terms

• I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.