SwiftUI ColorPicker cause pop to root view

Question

I have this weird issue. When I click the ColorPicker, the view dismissed and pop back to the root view. I have attach a screen record below. Anyone have idea how to fix this issue?

The code run on simulator ios 15.2

See screen record here

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            TabView {
                HomePageView()
                    .tabItem {
                        Label("Home", systemImage: "circle.grid.cross.fill")
                    }
              
                ProfileView()
                    .tabItem {
                        Label("Profile", systemImage: "person.fill")
                    }
            }
            .background(.secondary)
        }
    }
}

struct HomePageView: View {
    var body: some View {
        Text("Home View")
    }
}

struct ProfileView: View {
    var body: some View {
        NavigationLink {
            ColorPickerView()
        } label: {
            Text("Color Picker View")
        }
    }
}

struct ColorPickerView: View {
    @State var bgColor = Color.blue
    var body: some View {
        ColorPicker("Pick color", selection: self.$bgColor)
            .padding(.horizontal, 15)
    }
}

Answer 1

NavigationView in each tab instead of outside the TabView

Answer 2

New suggestion: Use NavigationStack in iOS16 to overcome the issue of popping to the previous or sometimes to the root view.