Gatsby browser JS imported component props ignored

[achchu93]

header.js
const Header = () => (
  <header bg="font"></header>
)

gatsby-browser.js
import Header from './../src/components/Header'
const wrapRootElement = ({element}) => (
  <>
    <Header />
    {element}
  </>
)

When the Header component is imported to other places like pages or sub components it works. If we imported it to gatsby-browser.js the prop styles are ignored. Any specific config for that?

[achchu93]

@arshad your help would appreciated!

[shadcn]

@achchu93 I'll take a look at it. Honestly, been a while since I looked into Gatsby.