When attempting to pass custom props from layout to children, I am receiving the following: TypeError: props.children is not a function

Layout (functional component summary)

import React, { useState } from 'react'

import { useStaticQuery, graphql } from 'gatsby'



export default (props) => {

    const {site} = useStaticQuery(

        graphql`

            {

                site {

                    siteMetadata {

                        title

                    }

                }

            }

        `

    )

    const globals = {title: site.siteMetadata.title}



    return (

        <>

            {props.children({...props, ...globals})}

        </>

    )

}

Child (also a functional component)

import React from react

import Layout from '../components/layout'



export default () => {

    return (

        <Layout>

            <main>

                <h1>*site title will go here</h1>

            </main>

        </Layout>

    )

}