Gatsby, Netlify CMS - Minified React error #31

Question

I have a site I am working on to learn React in combination with Gatsby and Netlify CMS. When I now want to use the preview for a page in Netlify CMS, I get a Minified React error #31 (React Error Decoder). The page rendering with Gatsby works as expected.

The react component looks like this:

import React from 'react'
import PropTypes from 'prop-types'
import Content from '../components/Content'

export const HTMLPageTemplate = ({ title, content, contentComponent }) => {
  const PageContent = contentComponent || Content

  return (
    <div className="container content-container">
      <h2>{title}</h2>
      <PageContent className="content" content={content} />
    </div>
  )
}

HTMLPageTemplate.propTypes = {
  title: PropTypes.string.isRequired,
  content: PropTypes.string,
  contentComponent: PropTypes.func,
}

The Content component looks like this:

import * as React from 'react'
import PropTypes from 'prop-types'

export const HTMLContent = ({ content, className }) => (
  <div className={className} dangerouslySetInnerHTML={{ __html: content }} />
)

const Content = ({ content, className }) => ({ content })

Content.propTypes = {
  content: PropTypes.node,
  className: PropTypes.string,
}

HTMLContent.propTypes = Content.propTypes

export default Content

The react preview template for Netlify CMS looks like this:

import React from 'react'
import PropTypes from 'prop-types'
import { HTMLPageTemplate } from '../../templates/html-page'

const HTMLPagePreview = ({ entry, widgetFor }) => {
  console.log(widgetFor('body'))
  return (
    <HTMLPageTemplate
      title={entry.getIn(['data', 'title'])}
      content={widgetFor('body')}
    />
  )
}

HTMLPagePreview.propTypes = {
  entry: PropTypes.shape({
    getIn: PropTypes.func,
  }),
  widgetFor: PropTypes.func,
}

export default HTMLPagePreview

and is registered in the cms.js with CMS.registerPreviewTemplate('html', HTMLPagePreview).

This is a screenshot of Netlify CMS with the logged object in the console.

The printed object for content is as followed:

{
    "key": "body",
    "ref": null,
    "props": {
        "field": {
            "label": "Body",
            "name": "body",
            "widget": "markdown"
        },
        "value": "\nDies ist ein Testbeitrag\n",
        "entry": {
            "partial": false,
            "path": "src/pages/html/dies-ist-ein-test.md",
            "meta": {
                "path": "src/pages/html/dies-ist-ein-test.md"
            },
            "isModification": null,
            "raw": "---\ntemplateKey: html-page\nlayout: html\ntitle: Dies ist ein Test\npath: /test/\n---\n\nDies ist ein Testbeitrag\n",
            "data": {
                "templateKey": "html-page",
                "layout": "html",
                "title": "Dies ist ein Test",
                "path": "/test/",
                "body": "\nDies ist ein Testbeitrag\n"
            },
            "author": "",
            "slug": "dies-ist-ein-test",
            "newRecord": false,
            "status": "",
            "mediaFiles": [
                {
                    "id": "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855",
                    "name": ".gitkeep",
                    "path": "static/images/.gitkeep",
                    "file": {},
                    "size": 0,
                    "url": "blob:http://localhost:8000/d320cb6d-0766-4dc1-95bb-dc6bf5a63cf9",
                    "displayURL": "blob:http://localhost:8000/d320cb6d-0766-4dc1-95bb-dc6bf5a63cf9",
                    "key": "3416f431-310a-4f99-a236-214272483261"
                }
            ],
            "label": null,
            "updatedOn": "",
            "i18n": {},
            "collection": "html"
        },
        "fieldsMetaData": {}
    },
    "_owner": null
}

The code is mostly the same as for the blog page in netlify-templates/gatsby-starter-netlify-cms, where it works without any error (and the logged object is equal to the one in my project). What am I doing wrong?