SSR not showing some CSS components that are being displayed on Localhost

[ActuallySam]

I was building my portfolio website and it was going fine until I deployed it to GitHub and found that the page wasn't displaying properly and my Sidebar navigations were missing.

Note: The SiteMetadata from the gatsby-config.js is used by the TypeScript to render the information onto the Socials.tsx.

Here's the code:

gatsby-config.js

  module.exports = {
      pathPrefix: "/portfolio-website",
      flags: {
	      DEV_SSR: true
      },
      plugins: [
	      {
		      resolve: `@chakra-ui/gatsby-plugin`,
		      options: {
			      resetCSS: true,
			      isUsingColorMode: true,
		      },
	      },
	      `gatsby-plugin-image`,
	      {
		      resolve: `gatsby-plugin-manifest`,
		      options: {
			      icon: 'src/assets/images/logo.png',
			      name: `Samarth Srivastava`,
			      short_name: `Sam`,
			      start_url: `/`,
			      background_color: `#ececec`,
			      theme_color: `#ececec`,
			      display: `minimal-ui`,
		      },
	      },
	      `gatsby-plugin-offline`,
	      `gatsby-plugin-react-helmet`,
	      `gatsby-plugin-sharp`,
	      {
		      resolve: `gatsby-source-filesystem`,
		      options: {
			      name: `data`,
			      path: `${__dirname}/src/data/`,
		      },
	      },
	      {
		      resolve: `gatsby-transformer-remark`,
		      options: {
			      plugins: [
				      {
					      resolve: `gatsby-remark-external-links`,
					      options: {
						      rel: `nofollow noopener noreferrer`,
						      target: `_blank`,
					      },
				      },
				      {
					      resolve: `gatsby-remark-images`,
					      options: {
						      linkImagesToOriginal: true,
						      maxWidth: 700,
						      quality: 90,
					      },
				      },
			      ],
		      },
	      },
	      `gatsby-transformer-sharp`,
      ],
      siteMetadata: {
	      author: `Samarth Srivastava`,
	      description: ``,
	      email: `[email protected]`,
	      image: '/og.png',
	      navLinks: [`about`, `experience`, `work`, `contact`],
	      repo: `https://github.com/ActuallySam/`,
	      socials: [
		      {
			      site: `github`,
			      url: `https://github.com/ActuallySam`,
		      },
		      {
			      site: `instagram`,
			      url: `https://www.instagram.com/srivastava_samarth`,
		      },
		      {
			      site: `twitter`,
			      url: `https://twitter.com/ActuallySam91`,
		      },
		      {
			      site: `linkedin`,
			      url: `https://www.linkedin.com/in/samarth-srivastava-43050a1a4/`,
		      },
		      {
			      site: `codepen`,
			      url: `https://codepen.io`,
		      },
	      ],
	      title: `Samarth Srivastava`,
	      url: `https://actuallysam.github.io/portfolio-website`,
      },
  }; 

package.json

  "dependencies": {
      "@chakra-ui/gatsby-plugin": "^2.0.1",
      "@chakra-ui/react": "^1.6.7",
      "@emotion/react": "^11.4.1",
      "@emotion/styled": "^11.3.0",
      "@fontsource/gruppo": "^4.5.0",
      "framer-motion": "^4.1.17",
      "gatsby": "^3.12.1",
      "gatsby-plugin-image": "^1.13.0",
      "gatsby-plugin-manifest": "^3.13.0",
      "gatsby-plugin-offline": "^4.13.0",
      "gatsby-plugin-react-helmet": "^4.13.0",
      "gatsby-plugin-sharp": "^3.13.0",
      "gatsby-plugin-styled-components": "^4.14.0",
      "gatsby-remark-external-links": "^0.0.4",
      "gatsby-remark-images": "^5.11.0",
      "gatsby-source-filesystem": "^3.13.0",
      "gatsby-transformer-remark": "^4.11.0",
      "gatsby-transformer-sharp": "^3.13.0",
      "prop-types": "^15.7.2",
      "react": "^17.0.1",
      "react-dom": "^17.0.1",
      "react-icons": "^4.2.0",
      "react-intersection-observer": "^8.32.1"
    },
    "devDependencies": {
      "@types/node": "^16.9.2",
      "@types/react": "^17.0.21",
      "@types/react-dom": "^17.0.9",
      "@types/react-helmet": "^6.1.2",
      "gh-pages": "^3.2.3",
      "prettier": "2.3.2",
      "react-helmet": "^6.1.0"
    }

Socials.tsx (to import the values from gatsby-config.js)
`
import React from 'react';

  import { Flex, Icon } from '@chakra-ui/react';
  import {
      FiCodepen,
      FiGithub,
      FiInstagram,
      FiLinkedin,
      FiTwitter,
  } from 'react-icons/fi';
  
  import { ISiteMetadataLink } from '@data/models';
  import { setSize } from '@utils';
  
  import { AnimatedLink } from '@components';
  
  interface IComponentProps {
      isLargeScreen: boolean;
      socials: ISiteMetadataLink[];
  }
  
  export const Socials: React.FC<IComponentProps> = ({
      isLargeScreen,
      socials,
  }) => {
      const setIcon = (site: string) =>
	      site === `github`
		      ? FiGithub
		      : site === `instagram`
		      ? FiInstagram
		      : site === `twitter`
		      ? FiTwitter
		      : site === `linkedin`
		      ? FiLinkedin
		      : site === `codepen` && FiCodepen;
  
      return (
	      <Flex
		      flexDir={isLargeScreen ? `column` : `initial`}
		      justifyContent={isLargeScreen ? 'initial' : 'space-evenly'}
		      w="full"
	      >
		      {socials &&
			      socials.map(link => {
				      const icon = setIcon(link.site);
  
				      return (
					      <AnimatedLink
						      aria-label={link.site}
						      href={link.url}
						      isExternal
						      key={link.site}
						      mb={isLargeScreen ? setSize(1) : 'initial'}
						      p={setSize(0.5)}
					      >
						      {icon && <Icon as={icon} display="flex" />}
					      </AnimatedLink>
				      );
			      })}
	      </Flex>
      );
  };

`

Sides.tsx (to style the buttons)
`
import React from 'react';
import { Flex, Text } from '@chakra-ui/react';

  import { ISiteMetadataLink } from '@data/models';
  import { setSize } from '@utils';
  
  import { AnimatedLink, Socials } from '@components';
  
  interface IComponentProps {
      email?: string;
      isLargeScreen: boolean;
      socials?: ISiteMetadataLink[];
  }
  
  export const Sides: React.FC<IComponentProps> = ({
      email,
      isLargeScreen,
      socials,
  }) => {
      return (
	      <Flex
		      as="aside"
		      flexDir="column"
		      bottom="25%"
		      {...(socials ? { left: setSize(2) } : { right: setSize(2) })}
		      position="fixed"
	      >
		      {socials && (
			      <Socials isLargeScreen={isLargeScreen} socials={socials} />
		      )}
		      {email && (
			      <AnimatedLink
				      aria-label="email"
				      css={{ writingMode: `vertical-rl` }}
				      href={`mailto:${email}`}
				      mb={setSize(1)}
				      p={setSize(0.5)}
			      >
				      <Text
					      fontFamily="Gruppo"
					      fontSize="x-large"
					      fontWeight="bold"
					      letterSpacing="0.5px"
					      lineHeight={1}
				      >
					      {email}
				      </Text>
			      </AnimatedLink>
		      )}
	      </Flex>
      );
  };

`

Localhost images are given below:

SSR images (deployed website images) are given below: