Material UI Grid item pushed upward due to image loading

When I am using the Material UI grid system with a project I am doing using create-react-app. I have two grid items that are adjacent to each other. That look like so:

This is exactly what I want. For some reason; however, when the page loads for a split second the text on the right side gets pushed upward and flashes unstyled like so: I suspect it is because the image hasn't fully loaded, so the text sits higher up until the image loads. Any advice on how to prevent this or suggestions would be greatly appreciated!!

here is a code sandbox to recreate https://codesandbox.io/s/nifty-jang-kbbty?file=/src/pages/Home.js

if you go from the home page to /portfolio when the code sandbox is in full screen, you will see the flash of unstyled content i am talking about.

      <Grid container justify='center' alignItems='center'>
        <Grid item xs={12} sm={9} md={9} lg={6} xl={6}>
          <img src={JobTracker} alt='jobtracker' style={{ width: '100%' }} />
        </Grid>

        <Grid item xs={12} sm={9} md={9} lg={6} xl={6}>
          <Container maxWidth='xs'>
            <Typography variant='h3' style={{ textAlign: 'center' }}>
              JobTracker
            </Typography>
            <br />
            <Typography variant='body2'>
              A platform that allows recent graduates from Wyncode Academy to
              track job applications. Technologies used: ReactJS, NodeJS, Google
              Cloud Functions, and Google Firestore.
            </Typography>
         </Container>
        </Grid>
      </Grid>