Angular 13: lazy loading of named outlets

What I want

I want to route to /edit/foo and lazy-load the correct modules.

What I get

When I try to call /edit/foo I get an Error:

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'edit/foo'

What I have:

I have a component with two router-outlets:

<!-- vertical-splitscreen.component.html -->

<div class="container-fluid m-0 p-0">
  <div class="row m-0 p-0">
    <div class="col-12 col-md-7 m-0 p-0">
      <router-outlet name="left"></router-outlet>
    </div>
    <div class="col-12 col-md-5 m-0 p-0">
      <router-outlet name="right"></router-outlet>
    </div>
  </div>
</div>

I have also a root tree with lazy loading:

/* app-routing.module.ts */

const routes: Routes = [
  {
    path: '',
    redirectTo: '/edit',
    pathMatch: 'full'
  },
  {
    path: 'edit',
    loadChildren: () => import('./routes/edit-routing.module').then(m => m.EditRoutingModule),
    canActivate: [AuthGuard],
  },
];

.

/* edit-routing.module.ts */

const routes: Routes = [
  {
    path: '',
    component: VerticalSplitscreenComponent,
    children: [
      {
        path: '',
        loadChildren: () => import('../modules/preview/preview.module').then(m => m.PreviewModule),
        outlet: 'left',
      },
      {
        path: '',
        loadChildren: () => import('../modules/edit-form/edit-form.module').then(m => m.EditFormModule),
        outlet: 'right',
      },
    ],
  }
];

.

/* edit-form-routing.module.ts */

const routes: Routes = [
  {
    path: 'foo',
    component: EditFormComponent,
  },
];

What confuses me

When I remove the name "right" of the outlet, it works. Check the following changes:

In vertical-splitscreen.component.html

<router-outlet name="right"></router-outlet>

becomes

<router-outlet></router-outlet>

and in edit-routing.module.ts the line

outlet: 'right',

has to be deleted.

Conclusion and question

Actually it should work but it does not since there is a named outlet. So, is there any advice or workaround to make it work?