Unhandled Runtime Errors, Seo component in Gatsby

I'm learning to make Seo component in Gatsby, I wrote this code copied this method from Gatsby starter, but I have a problem of showing this error with 3 Unhandled Runtime Errors?

this is My Seo code

import * as React from "react"
import PropTypes from "prop-types"
import { Helmet } from "react-helmet"
import { useStaticQuery, graphql } from "gatsby"

const Seo = ({ description, lang, meta, title }) => {
  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
            social {
              twitter
            }
          }
        }
      }
    `
  )

  const metaDescription = description || site.siteMetadata.description
  const defaultTitle = site.siteMetadata?.title

  return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={title}
      titleTemplate={defaultTitle ? `%s | ${defaultTitle}` : null}
      meta={[
        {
          name: `description`,
          content: metaDescription,
        },
        {
          property: `og:title`,
          content: title,
        },
        {
          property: `og:description`,
          content: metaDescription,
        },
        {
          property: `og:type`,
          content: `website`,
        },
        {
          name: `twitter:card`,
          content: `summary`,
        },
        {
          name: `twitter:creator`,
          content: site.siteMetadata?.social?.twitter || ``,
        },
        {
          name: `twitter:title`,
          content: title,
        },
        {
          name: `twitter:description`,
          content: metaDescription,
        },
      ].concat(meta)}
    />
  )
}

Seo.defaultProps = {
  lang: `en`,
  meta: [],
  description: ``,
}

Seo.propTypes = {
  description: PropTypes.string,
  lang: PropTypes.string,
  meta: PropTypes.arrayOf(PropTypes.object),
  title: PropTypes.string.isRequired,
}

export default Seo

another issue that also below snippet of this code is not reachable

    />
  )
}

Seo.defaultProps = {
  lang: `en`,
  meta: [],
  description: ``,
}

Seo.propTypes = {
  description: PropTypes.string,
  lang: PropTypes.string,
  meta: PropTypes.arrayOf(PropTypes.object),
  title: PropTypes.string.isRequired,
}

export default Seo

here also my index.js where I tried to import Seo

import { graphql, Link } from "gatsby"
import React from "react"
import Layout from "../components/Layout"
import * as styles from "../styles/home.module.css"
import { StaticImage } from "gatsby-plugin-image"
import Seo from "../components/Seo"

export default function Home({ data }) {
  const siteTitle = data.site.siteMetadata.title
  const siteDescription = data.site.siteMetadata.description
  return (
    <Layout>
      <Seo title={siteTitle} description={siteDescription} />
      <section className={styles.header}>
        <div className={styles.content}>
          <h2>hello world!</h2>
          <h3>Let's turn some ideas into websites.</h3>
          <p>I'm a Freelancer Web Developer,</p>
          <p>
            Ready to help individual customers or small startups build their
            perfect Website.
          </p>
          <Link to="/projects" className={styles.btn}>
            My Projects
          </Link>
        </div>
        <div className={styles.img}>
          <StaticImage
            src="../images/header1.jpg"
            placeholder="blurred"
            layout="fullWidth"
            alt="Banner"
          />
        </div>
      </section>
    </Layout>
  )
}

export const HomeQuery = graphql`
  query HomeQuery {
    site {
      siteMetadata {
        title
        description
        social {
          twitter
        }
      }
    }
  }
`

here as well I imported Seo

import React from "react"
import { Link } from "gatsby"
import Seo from "../Seo"
import styled from "styled-components"
import icon from "../../images/svg/logo-icon.svg"

const LogoWrap = styled.div`
  display: flex;
  color: var(--alpha-color);
  align-items: center:
  text-align: left;
  letter-spacing: 1px;
  text-transform: uppercase;
  }

  img {
    display: inline;
    margin-right: 3px;
  }
`

const Logo = () => {
  const { title } = Seo()

  return (
    <LogoWrap as={Link} to="/">
      <img src={icon} alt={title} width="40" height="30"></img>
      {title}
    </LogoWrap>
  )
}

export default Logo

need help what I'm doing wrong!?