Material UI (Scrollspy) - React - use tabs to move through list and auto scroll to index

If I had a large list of items that each had a category,

const categories: string[] = [0, 1, 2, 3, 4, 5];
const items: {name: string, category: number}[] = [{name: "foo", category: 1}, {name: "bar", category: 1}, {name: "foobar", category: 2}, {name: "barfoo", category: 3}, ... etc.];

..and in material-ui they were used as a tab header for the categories:

  <AppBar>
    <Tabs
      value={tabIndex}
      onChange={handleChange}
      indicatorColor="secondary"
      variant="scrollable"
      scrollButtons="auto"
    >
      {categories.map((i) => (
        <Tab
          key={i}
          label={i}
        />
      ))}
    </Tabs>
  </AppBar>

I then had a long list of the items underneath the tabs header that are sorted together by their category.

How could I use the tabs to move through sequentially through the list by autoscrolling to the first category in the position based on the tab selected as well as auto updating the tab position when scrolling past the specific first index in the list.

For a visual example:

Example image to use tabs to move through sequential content that needs to be read in a particular order

How could I achieve something like this in material ui & react? In summary,

1. Scroll through a large list of items that have and are sorted by categories
2. Auto scroll to first list position category from tab select
3. Auto select a tab based on the list scroll position