Does StaticQuery not work in components called by gatsby-ssr.js ?

[tqureshi-uog]

I've run into an extremely frustrating issue and can't for the life of me figure out what's wrong. Our site has various components that call StaticQuery and useStaticQuery and they work just fine. But in our header.js component, the StaticQuery function fails. The header component is called by gatsby-ssr.js (because we need it to load an external JS file/web component) like so:

export const onRenderBody = ({ setPreBodyComponents }) => {
    setPreBodyComponents([
        <Header />
    ])
}

The basic structure of our header.js component itself is this:

const Header = () => (
    <>
        <div id="header-breakpoint"></div>
        <ug-header className="unloaded"></ug-header>
    </>
)

...wherein any links placed between the <ug-header> tags are supposed to render in the sub-navigation area (and they do if hard-coded). So this is what I tried as a test:

export default function Header() {
    return (
    <StaticQuery
	query={graphql`
	  query {
	    allMenuItems {
		edges {
		  node {
			title
			url
		   }
		}
	      }
	    }
	  `}
	render={data => {
	<>
        <div id="header-breakpoint"></div>
        <ug-header className="unloaded">
		<Link to={data.allMenuItems.edges[0].node.url}>{data.allMenuItems.edges[0].node.title}</Link>
	</ug-header>
	</>
	}}
       />)	
}

...and it refuses to work. There are no errors when I run gatsby develop, but on the site itself, I see a blank space where the header should be along with the words Loading (StaticQuery) (I've even tried with a totally different StaticQuery from another component, a query I know returns data successfully everywhere else, but it doesn't work in header.js).

Does anyone know why this is happening? Is it because header.js is being called as a setPreBodyComponent, and preBodyComponents can't use StaticQuery?