🐛 Incorrect Header floating when scrolling and grouping + sticky header rows

[yvone-sre]

• what edition are you using - enterprise
• version - 5.9.4

What you did: Grouping data and having sticky header rows

What happened: After scrolling, the first sticky header seems to be working correctly, but by reaching the second header and so on, the headers stay and do not float up and down as per their grouping.

Reproduction repository: => example from the docs: https://reactdatagrid.io/docs/grouping-rows

1. expand the first example for grouping
2. change the group key from "permission to call" to "first name"
3. check the option for "Use sticky group rows"
4. scroll down and see the headers start floating incorrectly above the grid instead of floating up and down as per grouping

=> example from a codesandbox: https://codesandbox.io/s/sticky-group-rows-yj4n7s?file=/src/App.js

Problem description: Reading and using the data on the grid with this issue makes it confusing.

Suggested solution: Ideally, the headers should remain sticky at the top, but at least move along their grouping data and not float above the other cells. I found this sandbox (from an unrelated issue, don't mind that) with a close behavior to what's ideal https://stackoverflow.com/a/53468623