Creating child theme that uses gatsby-theme-material-ui breaks build

[davad]

I built a site using gatsby-theme-material-ui. Now I want to take my site and package it up as a theme. When I try to use my new theme, I get the following error when I run gatsby build:

failed Building production JavaScript and CSS bundles - 8.122s

 ERROR #98123  WEBPACK

Generating JavaScript bundles failed

/home/davad/Sync/freelance/CaribbeanOS/carnival/spikes/material-ui-issue/node_modules/gatsby-theme-material-ui-top-layout/src/wrap-with-provider.js: Support for the
experimental syntax 'jsx' isn't currently enabled (7:10):

  5 |
  6 | export default function wrapWithProvider({ element }) {
> 7 |   return <TopLayout theme={theme}>{element}</TopLayout>;
    |          ^
  8 | }
  9 |

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

File: ../node_modules/gatsby-theme-material-ui-top-layout/src/wrap-with-provider.js:7:9


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed.

You should be able to reproduce the problem by cloning this repo and building the site workspace: https://github.com/davad/gatsby-theme-material-ui-subtheme-bug

I'm not sure if this is a gatsby-theme-material-ui-top-layout bug or a general Gatsby bug. Any ideas what's going on here?