matchedGeometryEffect flickers in a TabView

I tried building the View from this section, but when there is a List on the second tab, the animation performed by the matchedGeometryEffect does not work as intended.

This video shows how the transition works with Text("Second Tab") as the second tab. Everything looks fine.

But when I replace the Text with a List, the transition flickers and does not look smooth anymore.

    List {
        Text("The Scarlet Letter")
        Text("Moby-****")
        Text("Little Women")
        Text("Adventures of ")
    }

Here is the code for the app.

import SwiftUI

@main
struct MyWatchApp: App {
    @Namespace var library
    @State var pageNumber = 0
    private let bookIcon = "bookIcon"
    
    var body: some Scene {
        WindowGroup {
            NavigationStack {
                TabView(selection: $pageNumber) {
                    VStack {
                        Image(systemName: "books.vertical.fill")
                            .imageScale(.large)
                            .matchedGeometryEffect(
                                id: bookIcon,
                                in: library,
                                properties:  .frame,
                                isSource: pageNumber == 0)
                        Text("Books")
                    }
                    .tag(0)
                    
                    
                    Text("Second Tab").tag(1)
                }
                .tabViewStyle(.verticalPage)
                .toolbar {
                    ToolbarItem(placement: .topBarLeading) {
                        Image(systemName: "books.vertical.fill")
                            .matchedGeometryEffect(
                                id: bookIcon,
                                in: library,
                                properties:  .frame,
                                isSource: pageNumber != 0)
                    }
                }
            }
        }
    }
}