lists with common scrolling element

I'm trying to create a grouped list,
so that I have one scrolling element with groups and each group contains many items. ideally the groups list and all the items list will react to the same scroll.

I managed to create a non virtual groups list with virtual items lists inside: https://codesandbox.io/s/grouped-virtual-by-item-jor1nv?file=/src/App.tsx

but if I make the groups list virtual as well with the same scrolling element it scrolls back to the top instead of to the next group when scrolling down - https://codesandbox.io/s/grouped-virtual-no-render-group-91fils

is this a bug? am I doing something wrong?
CodeSandboxalissa.vrk
grouped virtual by item by alissa.vrk using @faker-js/faker, @tanstack/react-virtual, @types/lodash, lodash, react, react-dom, react-scripts
grouped virtual by item - CodeSandbox
CodeSandboxalissa.vrk
grouped virtual no render group by alissa.vrk using @faker-js/faker, @tanstack/react-virtual, @types/lodash, lodash, react, react-dom, react-scripts
Was this page helpful?