Background image not rendering under AppBar with React Material-UI

Question

I am developing a login page using React and Material-UI and I've run into an issue where my AppBar is visible, but it's covering the top part of my background image. The background image should extend fully to the top of the viewport, behind the AppBar, but instead, it starts below the AppBar, leaving a gap that shouldn't be there.

First image is how it is right now and second one how it should be

How my page looks right now

How my page should look

I'm using a Box container with Grid items to structure my layout. The AppBar is inside a Box, and the background image is set on a Grid item using backgroundImage style. I expected the background image to be positioned under the AppBar, extending to the top of the viewport, but the AppBar seems to be on top, and the background image starts below it, as if the AppBar has a solid background.

Here's a snippet of my GymLogin.jsx:

// ...other imports
import MainAppBar from '../components/MainAppBar';
import loginBackgroundImage from '../assets/images/loginBackgroundImage.jpg';

// GymLogin component
return (
    <Box sx={{ height: '100vh', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
        <MainAppBar color="#ffffff" />
        <Grid container sx={{ flexGrow: 1 }}>
            <Grid item xs={false} sm={4} md={7} sx={{
                backgroundImage: `url(${loginBackgroundImage})`,
                backgroundRepeat: 'no-repeat',
                backgroundSize: 'cover',
                backgroundPosition: 'center',
            }}>
            </Grid>
            {/* ... */}
        </Grid>
    </Box>
);