Animation Glitch behind Tab-bar

I'm trying to replicate edit/select mode of iOS 26 photos app. When user clicks Select button, bottom tab bar is replaced by the toolbar buttons. When I press Done button, a white opaque bar appears at the bottom behind the tabbar. It looks pretty straightforward to implement but I'm banging my head here now. Any help will be appreciated.

Code and animation frames attached bellow

struct ContentView: View {
  var body: some View {
    TabView(selection: $selectedTab) {
      OverviewView()
        .tabItem {
          Image(systemName: "chart.pie")
          Text("Overview")
        }
        .tag(0)

      //rest of the tabs
    } 
  }
}

struct OverviewView: View {
   @State private var editActive = false
   @State private var selection = Set<String>()
   @State private var items = [
    "Item 1",
    "Item 2",
    "Item 3",
   ]
  
  var body: some View {
    NavigationStack {
      List(selection: $selection) {
        ForEach(items, id: \.self) { item in
          Text(item)
          }
        }
      .toolbar {
        if editActive {
          ToolbarItem(placement: .bottomBar) {
            Button {
            } label: {
              Label("Delete", systemImage: "trash")
            }
          }
          ToolbarItem(placement: .bottomBar) {
            Button {
            } label: {
              Label("Category", systemImage: "tag")
            }
          }
        }
        ToolbarItem(placement: .topBarTrailing) {
          Button(editActive ? "Done" : "Select") {
            withAnimation {
              editActive.toggle()
            }
          }
        }
      }
      .environment(\.editMode, .constant(editActive ? .active : .inactive))
      .toolbar(editActive ? .hidden : .visible, for: .tabBar)
    }
  }
}

I have attached 5 frames during animation phase.