Collapsible Note custom editor component from the documentation not working

**Describe the bug**
I am trying to use Custom Editor Components and I cant get the markdown widget to behave properly
Just using the Collapsible Note example from the documentation results in an "undefined" displayed in the "details" part of the component.

**To Reproduce**
1. Add the Collapsible Note example to your `cms.js`:

```
CMS.registerEditorComponent({
// Internal id of the component
id: "collapsible-note",
// Visible label
label: "Collapsible Note",
// Fields the user need to fill out when adding an instance of the component
fields: [
{
name: 'summary',
label: 'Summary',
widget: 'string'
},
{
name: 'details',
label: 'Details',
widget: 'markdown'
}
],
// Regex pattern used to search for instances of this block in the markdown document.
// Patterns are run in a multline environment (against the entire markdown document),
// and so generally should make use of the multiline flag (`m`). If you need to capture
// newlines in your capturing groups, you can either use something like
// `([\S\s]*)`, or you can additionally enable the "dot all" flag (`s`),
// which will cause `(.*)` to match newlines as well.
//
// Additionally, it's recommended that you use non-greedy capturing groups (e.g.
// `(.*?)` vs `(.*)`), especially if matching against newline characters.
pattern: /^$\s*?(.*?)<\/summary>\n\n(.*?)\n^<\/details>$/ms,
// Given a RegExp Match object
// (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match#return_value),
// return an object with one property for each field defined in `fields`.
//
// This is used to populate the custom widget in the markdown editor in the CMS.
fromBlock: function(match) {
return {
summary: match[1],
detail: match[2]
};
},
// Given an object with one property for each field defined in `fields`,
// return the string you wish to be inserted into your markdown.
//
// This is used to serialize the data from the custom widget to the
// markdown document
toBlock: function(data) {
return `

${data.summary}

${data.detail}

`;
},
// Preview output for this component. Can either be a string or a React component
// (component gives better render performance)
toPreview: function(data) {
return `

${data.summary}

${data.detail}

`;
}
});
```
2. Going to your markdown editor and adding a Collapsible Note component
3. Putting text in it
4. Observing the "undefined" text on the preview

**Expected behavior**
Having a preview that displays the text in the "details" area

**Screenshots**

**Applicable Versions:**
- netlify-cms-app 2.15.61
- netlify-cms-core 2.54.2
- OS: Fedora 35
- Browser version: Firefox 95.0
- Node.JS version: v12