'Promise Element' is not a valid JSX element | Next.js | Page 1

Hello.
I am trying to use data fetching in app folder. I get this error when trying to insert component into layout:

TS2786: 'Header' cannot be used as a JSX component.
   Its return type 'Promise<Element>' is not a valid JSX element.
     Type 'Promise<Element>' is missing the following properties from type 'ReactElement<any, any>': type, props, key

What am I doing wrong here?
My layout file:

export default function RootLayout ({ children }: {
  children: React.ReactNode
}) {
  return (
    <html>
    <body>
    <Header/>
    {children}
    </body>
    </html>
  )
}

And my header file which causes this error:

async function Header () {
  const siteVariablesRes = await fetch('http://localhost:4000/api/globals/siteVariables')
  const siteVariables: {
    siteName: string
    phone: string
  } = await siteVariablesRes.json()

  return (
    <header className={styles.header}>
      ...
    </header>
  )
}

If contents of header are relevant, I can post them too, but there is just plain markup with only accessing siteVariables.
Despite this error, my app seems to be working in dev mode just fine.

#'Promise Element' is not a valid JSX element