Getting a view to animate on state change

I have a view that I am trying to get to animate on state change either using a transition or animate and so far nothing I've done has worked.

I've tried using withAnimation and .transition in various manners and no luck. Below is a repro and you'll see that the transition is very jagged.

Looking for suggestions on the best approach.

struct StackView: View {
  @State var showStack = true

  let columns = [
    GridItem(.flexible()),
    GridItem(.flexible()),
  ]

  var body: some View {
    VStack {
      if showStack {
        ZStack {
          ForEach(0 ..< 15) { item in
            TileView()
              .rotationEffect(.degrees(Double.random(in: 1..<45)))
              .transition(.asymmetric(insertion: .move(edge: .leading), removal: .move(edge: .bottom)))
          }
        }
      } else {
        LazyVGrid(columns: columns, spacing: 20) {
          ForEach(0 ..< 15) { item in
            TileView()
              .transition(.asymmetric(insertion: .move(edge: .leading), removal: .move(edge: .bottom)))

          }
        }
      }
    }
    .onAppear {
        DispatchQueue.main.asyncAfter(deadline: .now() + 1.9) {
          withAnimation(Animation.easeInOut(duration: 1).delay(0.5)) {
            showStack = false
          }
        }
    }
  }
}

struct TileView: View {
  var body: some View {
    RoundedRectangle(cornerRadius: 13)
      .frame(width: 175, height: 175, alignment: .center)
      .foregroundColor(.red)
      .shadow(radius: 13)
      .overlay(
        Text("1")
          .font(.largeTitle)
      )
      .transition(.asymmetric(insertion: .move(edge: .leading), removal: .move(edge: .bottom)))
  }
}