Dynamic Presentation Sheet Heights

In my application, I have NavigationStack presented as a sheet, and I intend to dynamically adjust its height while pushing views within it. I'm utilizing a global observable variable to manage the height and everything works fine except that the height changes abruptly without any animation. It abruptly transitions from one height to another.

The issue can be reproduced using the following code:

#Preview {
  @Previewable @State var height: CGFloat = 200
  
  Text("Parent View")
    .sheet(isPresented: .constant(true)) {
      NavigationStack {
        Form {
          NavigationLink("Button") {
            RoundedRectangle(cornerRadius: 20)
              .fill(Color.blue)
              .frame(height: 200)
              .navigationTitle("Child")
              .onAppear {
                withAnimation {
                  height = 300
                }
              }
          }
        }
        .navigationTitle("Parent")
        .navigationBarTitleDisplayMode(.inline)
        .presentationDetents([.height(height)])
        .onAppear {
          withAnimation {
            height = 150
          }
        }
      }
    }
}