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

## 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:

```

{% for col in data.widget.columns %}

/* 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;
}

```

Reproduce the nested array-area behavior using modules/two-column-widget/index.js and the widget markup shown in the issue, with the margin rule in modules/two-column-widget/ui/src/index.scss. Open the widget edit modal, click the parent breadcrumb, and verify that the far-right breadcrumb and edit tools appear again; use the linked video as the behavioral reference.

Written by the indexing model from the issue text.