Ion-split-pane not show ionic 5 angular 10

Hello community!
I present my problem.
I’ve been trying to render my ion-split-pane component for several days.
Info about my project =>

Ionic:

   Ionic CLI                     : 6.19.1 (/usr/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.4.4
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3

Cordova:

   Cordova CLI       : 11.0.0
   Cordova Platforms : android 7.1.4, ios 6.2.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 11 other plugins)

Utility:

   cordova-res                          : 0.15.4
   native-run (update available: 1.6.0) : 1.4.1

System:

   Android SDK Tools : 26.1.1 (/home/guidogagliardini/Android/Sdk)
   NodeJS            : v14.19.1 (/home/guidogagliardini/.nvm/versions/node/v14.19.1/bin/node)
   npm               : 6.14.16
   OS                : Linux 5.15

in one of my components, I am reusing the component where my ion-split-pane is hosted =>
result-operator.component.html =>
<app-derivation-results></app-derivation-results>

in component derivation-results.component.html =>

  <ion-header *ngIf="isOperator">
      <ion-toolbar class="menu-antecedentes-op" style="padding-top: 0px !important">
        <ion-buttons  slot="start">
          <ion-menu-button (click)="togglePanel()">
            <img src="../../../../../../assets/img/icon-menu-hamburguesa.svg" style="margin-top: 4px" />
          </ion-menu-button>
        </ion-buttons>
</ion-header>
  <ion-split-pane style="margin-top: 35px" [ngClass]="this.isPanelOpen ? 'panel-opened' : ''" when="z-index:2">
      <ion-menu contentId="content" (ionDidOpen)="openPanel()" (ionDidClose)="closePanel()">
        <ion-content>
          <ion-list>
            <ion-list-header style="
                    color: #606060;
                    font-size: 16px;
                    font-weight: 600;
                    color: #606060;
                    font-size: 16px;
                    font-weight: 600;
                    background: #fff3f3;
                    border-bottom: 1px solid rgba(96, 96, 96, 0.5);
                  ">
              <ion-label> Derivaciones </ion-label>
            </ion-list-header>

            <ion-menu-toggle autoHide="false" *ngIf="analysis_pending && analysis_pending.length > 0">
              <ion-item *ngFor="let item of analysis_pending" (click)="getHistory(item)" class="ligth">
                <ion-label style="
                        margin-bottom: 0px !important;
                        margin-top: 5px !important;
                        color: #d12f22;
                        font-size: 14px;
                        font-weight: 600;
                      ">
                  Pendiente
                </ion-label>
                <ion-label style="margin-top: 3px !important">
                  <b> {{ item.derivation_identifier }}: </b>
                  {{
                  item.derivation_created_at
                  | date: "EEEE":null
                  | titlecase
                  | slice: 0:3
                  }}

                  {{
                  item.derivation_created_at
                  | date: "dd/MM - HH:mm"
                  | titlecase
                  }}
                </ion-label>
              </ion-item>
            </ion-menu-toggle>

            <ion-menu-toggle autoHide="false" *ngIf="analysis_accepted && analysis_accepted.length > 0">
              <ion-item *ngFor="let item of analysis_accepted" (click)="getHistory(item)" class="ligth">
                <ion-label style="
                        margin-bottom: 0px !important;
                        margin-top: 5px !important;
                        color: #d12f22;
                        font-size: 14px;
                        font-weight: 600;
                      ">
                  Aceptada
                </ion-label>
                <ion-label style="margin-top: 3px !important">
                  <b> {{ item.derivation_identifier }}: </b>
                  {{
                  item.derivation_created_at
                  | date: "EEEE":null
                  | titlecase
                  | slice: 0:3
                  }}

                  {{
                  item.derivation_created_at
                  | date: "dd/MM - HH:mm"
                  | titlecase
                  }}
                </ion-label>
              </ion-item>
            </ion-menu-toggle>
            <ion-list-header style="
                    background: #ffc2c2 !important;
                    min-height: 30px;
                    padding-left: 0px !important;
                  ">
              <ion-label> Antecedentes </ion-label>
            </ion-list-header>
            <ion-menu-toggle autoHide="false" *ngIf="analysis_history && analysis_history.length > 0">
              <ion-item *ngFor="let item of analysis_history" (click)="getHistory(item)">
                <ion-label>
                  <b> {{ item.derivation_identifier }}: </b>
                  {{
                  item.derivation_created_at
                  | date: "EEEE":null
                  | titlecase
                  | slice: 0:3
                  }}

                  {{
                  item.derivation_created_at
                  | date: "dd/MM - HH:mm"
                  | titlecase
                  }}
                </ion-label>
              </ion-item>
            </ion-menu-toggle>
            <ion-menu-toggle autoHide="false" *ngIf="!analysis_history">
              <ion-item class="ligth">
                <ion-label> Sin Antecedentes. </ion-label>
              </ion-item>
            </ion-menu-toggle>
          </ion-list>
        </ion-content>
      </ion-menu>
      <ion-router-outlet id="content" main></ion-router-outlet>
    </ion-split-pane>

Sorry, the content is quite long. In this component (I’m only showing the part of the ion-split-pane) all the content is displayed perfectly, except that when I click on (click)=“togglePanel()” I don’t see It shows the ion-split-pane, but I can see that the component is there, from the Chrome inspector.
Curiously, when I enter through another part of the routing, where I use the component natively (derivations-results.component) the ion-split-pane works perfectly.
What is failing?
What needs to be configured?
Is ion-router-outlet configured correctly?
Thank you very much for your input and help.