Inner table failed to move around when outer table is sorted.

[wwsskkaa]

I have a nested table where the inner table is another react-table table instance, and the data im passing in locates in the children prop in the outer table object. I am using row.original.children to retrieve the current row's inner table
However now I want to perform the sorting on the outer table while some inner tables are expanded and I am encountering following problems:

1. sometimes the inner tables would still be rendered at the original spot where their parent rows are being sorted (see 1st screenshot)
2. sometimes they actually move around as their parent rows moved around, but if the inner table was sorted too, it would go back to the initial state(see 2nd screenshot)

screenshot 1: (bullet point 1)

screenshot 2: (bullet point 2)