Material Ui content flowing above appbar react

Question

I want content from other components flow beneath appbar on scroll

<AppBar  position="sticky" >
    <Toolbar>
        <Typography style={{color:'#58B461' }}>
            Logo
        </Typography>

        <Grid style={{ flexGrow: 1, textAlign: "center", display: { xs: 'none', sm: 'none' } }}>
            <Button style={{color:'black' }}> Community </Button>
            <Button style={{color:'black' }}> Bank </Button>
            <Button style={{color:'black' }}> Blog </Button>
            <Button style={{ color:'black',  }}> Help </Button>                    
        </Grid>
        <Button sx={{color:'white',   background:'#58B461' }}> Download the App </Button>
    </Toolbar> 
</AppBar>

other component

<MyTypography  fontWeight='normal' textAlign='center' fontSize='1.5rem'
                text="Lorem ipsum dolor sit amet. Sed repudiandae rerum qui saepe dignissimos ut dolor magni et amet molestiae ea nihil maiores et distinctio molestiae qui dolorem dolores. Ea praesentium maiores qui voluptatem quod ad dolores adipisci ut cumque recusandae sit voluptates quaerat est esse ullam et galisum iste. Est atque praesentium qui galisum consequatur ut quis voluptas et dolore tenetur." 
            />