gatsby-theme-wordpress-mdx/src/components/sections/Header/HeaderComponent.js

<p align="center"> <img width='200px' alt="Gatsby Theme" src="https://raw.githubusercontent.com/artezan/gatsby-theme-wordpress-mdx/master/%40artezan/gatsby-theme-wordpress-mdx/dn.png" />

/** @jsx jsx */
import React from 'react'
import { jsx, useThemeUI } from 'theme-ui'
import { MDXRenderer } from 'gatsby-plugin-mdx'

export const HeaderComponent = ({ body, frontmatter }) => {
  const { headerImages } = frontmatter
  const context = useThemeUI()
  const convertArrayToObject = (array, key) =>
    array.reduce(
      (obj, item) => ((obj[[item[key]]] = item.childImageSharp.fluid), obj),
      {}
    )
  let headerImagesFluid = {}
  if (headerImages) {
    headerImagesFluid = convertArrayToObject(headerImages, 'name')
  }
  return (
    <MDXRenderer
      scope={{
        ...frontmatter,
        context,
        headerImagesFluid
      }}
    >
      {body}
    </MDXRenderer>
  )
}