Widget with array with nested areas - After after opening widget edit modal, parent array breadcrumb click no longer opens far right breadcrumb and edit options

[Darren-Caboz-Altstudios]

To Reproduce

Step by step instructions to reproduce the behavior:

1. Please find video example for issue experienced - https://www.loom.com/share/034d41f2a3094aecb9b390bc371125b5?sid=202dddaf-7207-4f2b-bf3c-049db60202ac

Expected behavior

When editing a widget on the frontend for array with areas, the parent level breadcrumb option should still show up the far right breadcrumb and edit tools option when clicked. I do set the widget area margin spacing for top and bottom to zero, as I like the editing page to be as close as possible to the live frontend view:

[data-apos-area] [data-apos-area] {
margin: 0 !important;
}

Describe the bug

After you click the edit widget option for the widget, the parent is no shown on the page when you click the breadcrumb label.

Details

Version of Node.js:
Apostrophecms V4.7.1, clean install of apostrophecms

Server Operating System:
Mac OSX

Additional context:
Array schema:

// modules/two-column-widget/index.js
module.exports = {
  extend: '@apostrophecms/widget-type',
  options: {
    label: 'Two column',
  },
  // 👇 The widget type's field schema
  fields: {
    add: {
      columns: {
        type: 'array',
        label: 'Columns Array',
        fields: {
          add: {
            // 👇 The first column area
            columnOne: {
              type: 'area',
              label: 'Column One',
              options: {
                widgets: {
                  '@apostrophecms/rich-text': {},
                  '@apostrophecms/image': {},
                },
              },
            },
            // 👇 The second column area
            columnTwo: {
              type: 'area',
              label: 'Column Two',
              options: {
                widgets: {
                  '@apostrophecms/rich-text': {},
                  '@apostrophecms/image': {},
                },
              },
            },
          },
        },
      },
    },
  },
};

HTML:

<section class="columns">
  {% for col in data.widget.columns %}
    <div class="two-col">
      <div class="two-col__column">
        {% area col, 'columnOne' %}
      </div>
      {# <div class="two-col__column">
                    {% area col, 'columnTwo' %}
                  </div> #}
    </div>
  {% endfor %}
</section>
<style>
  /* modules/two-column-widget/ui/src/index.scss */
  .columns {
    background: #eee;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #000;
  }
  .two-col {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
  }
  .two-col__column {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  [data-apos-area] [data-apos-area] {
    margin: 0 !important;
  }
</style>