Material-UI - Как отрендерить что-нибудь поверх AppBar?

Question

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

Мое приложение структурировано следующим образом:

Main. js - содержит AppBar и response-router.

Различные представления или «страницы», которые загружаются response-router как дочерние для Main. js

Различные компоненты, которые отображаются на этих страницах.

Ниже вы можете увидеть, чего я пытаюсь достичь.

If it helps, here is the code for the AppBar, note; I have also tried with "static" position.

  Название сайта    // НЕКОТОРЫЙ ПУНКТ МЕНЮ     

И страница, на которой я пытаюсь отобразить виджет. На данный момент я просто использую компонент «Типографика» в качестве заполнителя. Я понимаю, что мне нужно установить индекс Z для div, в который этот виджет обернут, чтобы поднять его, однако я предполагаю, что он относится только к другим компонентам в этом представлении, а не также к AppBar, поскольку он исходит из в другом месте?

<div>
            <div
                style={{
                height: 20,
                backgroundColor: "yellow",
                position: "relative",
                zIndex: 10
            }}>
                <Typography component="h3" variant="h3">Widget Placeholder</Typography>
            </div>

            <Toolbar></Toolbar> // Empty toolbar is used to push all the other content down below the AppBar when it's position is set to fixed
// other content from this page
</div>  

Песочница кода: https://codesandbox.io/s/goofy-feather-cf1kd?file= / src / App. js

Спасибо :)