Mobile logo rendering incorrectly

[Isaac-Tait]

I am running into an odd issue where my mobile screen size logo is being rendered incorrectly. At first, I thought it was a CSS issue but if I comment out the code that switches logos at screen breakpoints the desktop logo renders correctly in the same dimensions that the mobile logo is being shown in... Probably easier to show than try to explain

What it looks like:

What it should look like:

My code in layout.js

import React from "react"
import { Link, useStaticQuery, graphql } from "gatsby"

import Navigation from "../components/navigation"
import Slider from "../components/slider"
import { GatsbyImage, getImage, withArtDirection } from "gatsby-plugin-image";
import Footer from "../components/footer"
import Pagination from "../templates/blog-pagination"

const Layout = ({ location, children }) => {
  const rootPath = `${__PATH_PREFIX__}/`
  let header

  const data = useStaticQuery(graphql`{
  desktopLogo: file(absolutePath: {regex: "/FfT_Logo_Desktop.png/"}) {
    childImageSharp {
      gatsbyImageData(
        width: 500
        quality: 100
        placeholder: TRACED_SVG
        formats: [AUTO, WEBP, AVIF]
        layout: CONSTRAINED
      )
    }
  }
  mobileLogo: file(absolutePath: {regex: "/FfT_Logo_Mobile.png/"}) {
    childImageSharp {
      gatsbyImageData(
        quality: 100
        placeholder: BLURRED
        formats: [AUTO, WEBP, AVIF]
        layout: FULL_WIDTH
      )
    }
  }
}
`)

const logos = withArtDirection(getImage(data.desktopLogo), [
  {
    media: "(max-width: 1024px)",
    image: getImage(data.mobileLogo),
  },
])

  if (location.pathname === rootPath) {
    header = (
      <div class="ml-20 mb-2">
        <GatsbyImage image={logos} alt="Fallfish Tenkara" />
      </div>
    )
  } else {
    header = (
      <div class="ml-20 mb-2">
        <Link to={`/`}>
          <GatsbyImage image={logos} alt="Fallfish Tenkara" />
        </Link>
      </div>
        
    )
  }
  return (
    <div class="flex flex-col">
      <Navigation />
      <header class="pr-2 md:w-2/3">{header}</header>  
        <div class="hidden md:block w-2/3 mx-auto">
          <Slider />
        </div>
      <div class="bg-gray-200 mb-4 w-full lg:w-2/3 mx-auto overflow-hidden rounded-lg shadow-xl">
        <main>{children}</main>
        <Pagination />
      </div>
        <Footer />
    </div>
  )
}

export default Layout

If I remove

{
   media: "(max-width: 1024px)",
   image: getImage(data.mobileLogo),
 },

then the desktop logo renders on the mobile view. It seems that the mobile logo, which is a square is being squished into the desktop logo space (which is a rectangle)...

This behavior was not present before "upgrading" to gatsby-plugin-image... Any pointers/suggestions to fix this would be appreciated. Thank you 😄

[Isaac-Tait]

My plugins are all up to date (as is gatsby) @:

gatsby-plugin-image ^1.6.0
gatsby-plugin-sharp ^3.5.0
gatsby-source-filesystem ^3.5.0
gatsby-transformer-sharp ^3.5.0
gatsby ^3.6.1