mdx: Bug with CodeBlocks

Subject of the issue

I followed the tutorial to turn on syntax highlighting on my application but I am getting the following error:

The above error occurred in the <Highlight> component:
    in Highlight (at CodeBlock.jsx:8)
    in Unknown (at App.jsx:50)
    in code (created by MDXCreateElement)
    in MDXCreateElement (at landing.md:65)
    in pre (created by MDXCreateElement)
    in MDXCreateElement (at landing.md:65)
    in wrapper (created by MDXCreateElement)
    in MDXCreateElement (at landing.md:21)
    in MDXContent (at App.jsx:88)
    in MDXProvider (at App.jsx:87)
    in div (created by ForwardRef(Container))
    in ForwardRef(Container) (created by WithStyles(ForwardRef(Container)))
    in WithStyles(ForwardRef(Container)) (at App.jsx:86)
    in Suspense (at App.jsx:85)
    in main (created by ProxyComponent)
    in ProxyComponent (created by StyledComponent)
    in StyledComponent (created by Content)
    in Content (at App.jsx:84)
    in Layout (created by Root)
    in LayoutProvider (created by Root)
    in Root (at App.jsx:81)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.jsx:80)
    in ThemeProvider (at App.jsx:78)
    in Unknown (at src/index.js:8)
    in StrictMode (at src/index.js:7)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

index.js:207 Uncaught TypeError: Cannot read property 'length' of undefined
    at Object.matchGrammar (index.js:207)
    at Object.tokenize (index.js:313)
    at Highlight.render (index.js:306)
    at finishClassComponent (react-dom.development.js:17160)
    at updateClassComponent (react-dom.development.js:17110)
    at beginWork (react-dom.development.js:18620)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22154)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at workLoop (scheduler.development.js:597)
    at flushWork (scheduler.development.js:552)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:164)

This is my CodeBlock.jsx component:

import Highlight, { defaultProps } from "prism-react-renderer";
import React from "react";

export default ({ children, className }) => {
  const language = className.replace(/language-/, "");

  return (
    <Highlight {...defaultProps} code={children} language={language}>
      {({ className, style, tokens, getLineProps, getTokenProps }) => (
        <pre className={className} style={{ ...style, padding: "20px" }}>
          {tokens.map((line, i) => (
            <div key={i} {...getLineProps({ line, key: i })}>
              {line.map((token, key) => (
                <span key={key} {...getTokenProps({ token, key })} />
              ))}
            </div>
          ))}
        </pre>
      )}
    </Highlight>
  );
};

And this is my MDXProvider configuration:

const components = {
  h1: (props) => (
    <Typography variant="h2" component="h1" {...props} gutterBottom />
  ),
  p: (props) => <Typography variant="body1" {...props} paragraph />,
  hr: (props) => <Divider light {...props} />,
  code: CodeBlock,
};

I have bootstrapped my application using CRA.

Your environment

• OS: Windows 10 Pro 1909
• Packages:

  "dependencies": {
    "@material-ui/core": "^4.9.14",
    "@material-ui/icons": "^4.9.1",
    "@mdx-js/react": "^1.6.1",
    "fg-loadcss": "^3.1.0",
    "prism-react-renderer": "^1.1.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    --- SNIP ---
  },
  "devDependencies": {
    "babel-loader": "^8.1.0",
    "mdx-loader": "^3.0.2"
  }

• Env:

• yarn: 1.22.4
• node: 13.12.0

Steps to reproduce

Tell us how to reproduce this issue. Please provide a working and simplified example.

🎉 BONUS POINTS for creating a minimal reproduction and uploading it to GitHub. This will get you the fastest support. 🎉

Expected behaviour

Should be working. 😵