I added a Background Image using the gatsby-background-image plugin but my Static Images dissapeared?

Question

So I created a new component using gatsby-background-image to add a background image to my project. I put my Layout component inside my Background component so that the background image shows on any page. The image shows in the background but now any Static Image that I had before disappeared? What am I doing wrong and how do I get this to work?

Background Component

import React from 'react'
import { graphql, useStaticQuery } from 'gatsby'
import BackgroundImage from 'gatsby-background-image'
import Layout from './Layout'

const BackgroundSection = () => {
  const data = useStaticQuery(
    graphql`
      query {
        desktop: file(relativePath: { eq: "wallpaper.png" }) {
          childImageSharp {
            fluid(quality: 90, maxWidth: 1920) {
              ...GatsbyImageSharpFluid_withWebp
            }
          }
        }
      }
    `
  )

  // Set ImageData.
  const imageData = data.desktop.childImageSharp.fluid

  return (
    <BackgroundImage
      Tag="section"
      fluid={imageData}
    >
      <Layout/>
    </BackgroundImage>
  )
}


export default BackgroundSection

Layout Component

import React from "react";
import Navbar from "./Navbar";
import Links from "./Links";
import "/styles/styles.css";


function Layout ({children}) {
  return (

    <section >
    <div className="layout">
      <div id="introduction">
        <h1 id="name">ANGIE</h1>
        <h2 className="title">Full Stack Software Engineer</h2>
      </div>
        <Links/>
      </div>
      <div className="layout">
         <Navbar />
         <div id="container">
             {children}
         </div>
      </div>
    </section>
  );
};

export default Layout;

Project Page where images are located

import React from "react";
import { StaticImage } from "gatsby-plugin-image";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faSquareYoutube, faSquareGithub } from "@fortawesome/free-brands-svg-icons"

function Projects() {
    return (
        <div>
            <div id="projects">
                <section>
                    <h2>Lotus Lucy</h2>
                    <StaticImage src="../images/lotuslucy.png"       placeholder="blurred"
                    className="projectimg"/>
                    <div style={{padding: 10}}>
                        < a href="https://github.com/angiem103/lotus-lucy" className="icon">
                            <FontAwesomeIcon icon={faSquareGithub} size="2x" />
                        </a>
                        < a href="https://youtu.be/Yzg9UFPxxgU" className="icon">
                            <FontAwesomeIcon icon={faSquareYoutube} size="2x"/>
                        </a>
                    </div>
                </section>
                <section>
                    <h2>Berry Social</h2>
                    <StaticImage src="../images/berrysocial.png"       placeholder="blurred"
                    transformOptions={{fit: "outside"}}
                    className="projectimg"/>
                    <div style={{padding: 10}}>
                        < a href="https://github.com/angiem103/berry-social" className="icon">
                            <FontAwesomeIcon icon={faSquareGithub} size="2x" />
                        </a>
                        < a href="https://youtu.be/-jhu7HsNRuc" className="icon">
                             <FontAwesomeIcon icon={faSquareYoutube} size="2x"/>
                        </a>
                    </div>
                </section>
            </div>
        </div>
    );
};

export default Projects; 

Gatsby Config File

/**
 * @type {import('gatsby').GatsbyConfig}
 */

const path = require(`path`)

module.exports = {
  siteMetadata: {
    title: `Angie Maticorena`,
    siteUrl: `https://www.yourdomain.tld`
  },
  plugins: ["gatsby-plugin-sass", "gatsby-plugin-image", "gatsby-plugin-sharp", "gatsby-transformer-sharp", `gatsby-transformer-sharp`, `gatsby-plugin-sharp`
  , {
    resolve: 'gatsby-source-filesystem',
    options: {
      "name": "images",
      "path": "./src/images/"
    },
    __key: "images"
  }
]
};