Manifest...' error when loading deployed Gatsby site on Amplify

Question

I have a Gatby/Material UI website that I just deployed on AWS amplify and it seems like the CSS is not loading on the first render. If I click a button that routes me to a different page then everything seems to work. I can even click back to be at the home page and it also looks normal now. If I reload the page then on the first render things look wrong again.

I do see this error in the console:

Manifest: Line: 1, column: 1, Syntax error.

I've seen some posts about this but hasn't resolved my issue, such as installing

"gatsby-plugin-manifest"
"gatsby-plugin-styled-components"
"styled-components"

I'm thinking it could also be the way I have my theme going into each page:

const IndexPage = () => 

return (
    <ThemeProvider theme={mainTheme}>
      <CssBaseline />
      <Layout>
        <HeroSection />
        <ClientLogoBar />
        <CaseStudies />
        <WhatMakesDifferent />
        <Services />
        <FlagBanner />
        <ClientTestimonials />
        <EndRace />
      </Layout>
    </ThemeProvider>
  );
};

Here's a link to the site: https://dev.d13stgdmqb568x.amplifyapp.com/

Here is my gtasby.config plugins

plugins: [
{
  resolve: "gatsby-plugin-google-analytics",
  options: {
    trackingId: "G",
  },
},
"gatsby-plugin-material-ui",
"gatsby-plugin-image",
"gatsby-plugin-react-helmet",
"gatsby-plugin-sitemap",
{
  resolve: "gatsby-plugin-manifest",
  options: {
    icon: "src/images/logo-short.png",
  },
},
"gatsby-plugin-sharp",
"gatsby-transformer-sharp",
{
  resolve: "gatsby-source-filesystem",
  options: {
    name: `src`,
    path: `${__dirname}/src/`,
  },
  __key: "images",
},
{
  resolve: `gatsby-plugin-google-fonts`,
  options: {
    fonts: [`Manrope\:200,300,400,500,600,700,800`],
    display: "swap",
  },
},
{
  resolve: `gatsby-plugin-styled-components`,
},

],