Ionic 7 - Ion-select component example of floating label does not render in browser

Question

I'm developing an app using ionic 7 and angular.

I'm trying to use the ion-select component with floating label: <ion-select label="Floating label" label-placement="floating">

I'm using exactly the same example published in the ionic official documentation. However, I don't get the expected output when rendering the page in either firefox or chrome. Am I missing anything?
(I note that other ionic components I'm using render as expected)

The code I'm using is as published on https://ionicframework.com/docs/api/select
(section label placement):

<ion-list>
  <ion-item>
    <ion-select label="Default label" placeholder="Favorite Fruit">
      <ion-select-option value="apple">Apple</ion-select-option>
      <ion-select-option value="banana">Banana</ion-select-option>
      <ion-select-option value="orange">Orange</ion-select-option>
    </ion-select>
  </ion-item>

  <ion-item>
    <ion-select label="Fixed label" label-placement="fixed" placeholder="Favorite fruit">
      <ion-select-option value="apple">Apple</ion-select-option>
      <ion-select-option value="banana">Banana</ion-select-option>
      <ion-select-option value="orange">Orange</ion-select-option>
    </ion-select>
  </ion-item>

  <ion-item>
    <ion-select label="Stacked label" label-placement="stacked">
      <ion-select-option value="apple">Apple</ion-select-option>
      <ion-select-option value="banana">Banana</ion-select-option>
      <ion-select-option value="orange">Orange</ion-select-option>
    </ion-select>
  </ion-item>

  <ion-item>
    <ion-select label="Floating label" label-placement="floating">
      <ion-select-option value="apple">Apple</ion-select-option>
      <ion-select-option value="banana">Banana</ion-select-option>
      <ion-select-option value="orange">Orange</ion-select-option>
    </ion-select>
  </ion-item>
</ion-list>

The expected output is:

However, the actual output I get is:
(Stacked and floating labels missing)

My app.module.ts looks as follows:

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { RouteReuseStrategy } from '@angular/router';
    
    import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
    
    import { AppComponent } from './app.component';
    import { AppRoutingModule } from './app-routing.module';
    import { FormsModule, ReactiveFormsModule } from '@angular/forms';
    import { Drivers } from '@ionic/storage';
    import { IonicStorageModule } from '@ionic/storage-angular';
    import * as CordovaSQLiteDriver from 'localforage-cordovasqlitedriver';

    import { ExampleComponent } from './pages/example/example.component'; //Added to try MK's example (see post comments)
    
    // Added FormsModule as suggested by MK (see post comments)
    @NgModule({
      declarations: [AppComponent],
      imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, FormsModule,
        IonicStorageModule.forRoot({
        name: '__mydb',
        driverOrder: [CordovaSQLiteDriver._driver, Drivers.IndexedDB, Drivers.LocalStorage]
      })],
      providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
      bootstrap: [AppComponent],
    })
    export class AppModule {}