Почему для правильного рендеринга в документации по Material-UI для прокрутки панелей приложений необходимы два компонента <Toolbar/>?

Я пытаюсь лучше понять, как работает Material-UI, и я был сбит с толку, почему мне нужно использовать компонент панели инструментов дважды, чтобы моя панель инструментов с прокруткой отображалась правильно, как в этот пример кода.

Если я не включу вторую панель инструментов после ElevationScroll, меню, которое я хочу разместить под панелью приложения, будет отображаться под панелью приложения. Если я включу его, мое меню сдвинется вниз и будет хорошо отображаться. Это прекрасно работает, но я не понимаю, почему мне нужно включать в свой jsx дополнительный элемент, чтобы все выглядело правильно, как в этом упрощенном примере:

function SettingsMenu() {
  return (
    <ElevationScroll>
      <AppBar>
        <Toolbar>
          <Typography>
            Settings
          </Typography>
        </Toolbar>
      </AppBar>
    </ElevationScroll>
    <Toolbar/>
    <MyMenu/>
  );
}

Я проверил в Google Devtools, чтобы выяснить, почему это происходит, вторая панель инструментов отображается как div с почти идентичными стилями CSS, но без дочерних элементов. Когда я удаляю его вручную в Devtools, меню, как и раньше, возвращается за панель приложения. Спасибо за любую помощь!