Columns do not sort in certain scenarios when in a nested group

[cameronhimself]

Describe the bug

Columns in nested groups do not sort correctly (or at all) in certain scenarios. It's not clear to me exactly what the root cause is, but the minimal repro provides a clear example.

Your minimal, reproducible example

https://codesandbox.io/s/react-typescript-forked-8smsot

Steps to reproduce

1. Go the minimal repro.
2. Click the "age" column twice to cause it to be sorted descending.
3. Note that Rusty and Orion are still sorted ascending by age.

Expected behavior

Rusty and Orion to be sorted descending by age.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Windows - Chrome

react-table version

8.3.1

TypeScript version

4.1.3

Additional context

In the minimal repro, if you uncomment the "Petey" line in the data array, the bug no longer presents.

Terms & Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[clocke3]

So I am testing out your example in CodeSandbox, as I thought I was having a similar situation in one of my projects. I added a new value to Pet and a new grouping based on that new value. I had all checkmarks on the groups and clicked "age" after rerendering, and sorting did not work . HOWEVER, when I switched off one of the old groupings, and sorted "age" with a previous grouping and the new value, the sort worked. Then, I switched back on all groupings (3 of them) and sorting started to work.