Collapsible Note custom editor component from the documentation not working

Start with the Collapsible Note custom editor example in the documentation and compare the field name declared in fields with the properties returned by fromBlock and used by toBlock and toPreview. Correct the inconsistent name so the details text appears in the preview, then verify the example in the markdown editor using the reproduction steps.

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: /^<details>$\s*?<summary>(.*?)<\/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 `
<details>
  <summary>${data.summary}</summary>

  ${data.detail}

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

  ${data.detail}

</details>
`;
  }
});

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