Tabs routing only works if it's the starting page

Ionic Framework Ionic Angular
1

Ionic 6.19.0
I am trying to build an app with two pages: the first page would just contain some buttons which all redirect to the second page, but load different content based on what you clicked
The second page contains 4 tabs.
The problem is that if I change the root page to be the tabs one, it works, no issues. However if I set the buttons page as the first one, when I click the button the tabs page loads, but the routing doesn’t work (either the tabs buttons do nothing, or they literally bring me to a page with just the tab content, and not the tabs)

Any guess as to why?

Here are my files:
app-routing:

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    // loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
    loadChildren: () => import('./start/start.module').then(m => m.StartPageModule)
  },
  {
    path: 'tabs',
    loadChildren: () => import('./tabs/tabs.module').then( m => m.TabsPageModule)
  },
  {
    path: 'start',
    loadChildren: () => import('./start/start.module').then( m => m.StartPageModule)
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

start html (the button page):

<ion-content [fullscreen]="true">
    <ion-grid>
      <ion-row style="height: auto; padding-top: 15%;">
        <ion-col size="6" push="3">
          <ion-text style="margin-left: 33%; margin-right: 33%; text-align: center;"><h1><strong>Select your Character</strong></h1></ion-text>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col size="4"></ion-col>
        <ion-col size="4">
          <ion-button
            [routerLink]="['tabs']"
            expand="full"
            color="tertiary"
            size="large"
            style="float: center"
            >Archimede</ion-button
          >
        </ion-col>
        <ion-col size="4"></ion-col>
      </ion-row>
    </ion-grid>
  </ion-content>

start routing:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Tab1Page } from '../tab1/tab1.page';
import { TabsPage } from '../tabs/tabs.page';

import { StartPage } from './start.page';

const routes: Routes = [
  {
    path: '',
    component: StartPage
  },
  {
    path: 'tabs',
    component: TabsPage
    // loadChildren: () => import('../tabs/tabs.module').then( m => m.TabsPageModule)
  },
  {
    path: 'tabs/tab1',
    component: Tab1Page
    // loadChildren: () => import('../tabs/tabs.module').then( m => m.TabsPageModule)
  },
  {
    path: 'start',
    component: StartPage
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class StartPageRoutingModule {}

tabs html:

<ion-toolbar>
  <ion-grid>
    <ion-row style="height: 50px">
      <ion-col size="3">
        <ion-title style="line-height: 40px"> DnD Helper </ion-title></ion-col>
      <ion-col size="6">
        <ion-tabs>
          <ion-tab-bar slot="top">
            <ion-tab-button tab="tab1">
              <ion-icon name="stats-chart-sharp" title="Stats"></ion-icon>
              <ion-label>Stats</ion-label>
            </ion-tab-button>
            <ion-tab-button tab="tab2">
              <ion-icon name="briefcase-sharp" title="Inventory"></ion-icon>
              <ion-label>Inventory</ion-label>
            </ion-tab-button>
            <ion-tab-button tab="tab3">
              <ion-icon name="book-sharp" title="Spells"></ion-icon>
              <ion-label>Spells</ion-label>
            </ion-tab-button>
            <ion-tab-button tab="tab4">
              <ion-icon name="clipboard-sharp" title="Notes"></ion-icon>
              <ion-label>Notes</ion-label>
            </ion-tab-button>
          </ion-tab-bar>
        </ion-tabs>
      </ion-col>
      <ion-col size="3">
        <ion-button fill="clear" color="danger" style="float: right;">
          <ion-icon name="close-sharp"></ion-icon>
        </ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-toolbar>

tabs routing:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    redirectTo: '/tabs/tab1',
    children: [
      {
        path: 'tab1',
        loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
      },
      {
        path: 'tab2',
        loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
      },
      {
        path: 'tab3',
        loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
      },
      {
        path: 'tab4',
        loadChildren: () => import('../tab4/tab4.module').then(m => m.Tab4PageModule)
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
})
export class TabsPageRoutingModule {}

Any help would be appreciated, thanks!