Wrapping views with a VStack breaks animation, but using an extension to do the same thing fixes it.

I was having issues with views transitioning between being visible and not visible inside of List. They would appear, but the animation would be jerky. I switched to using a Section, and the animation looked much better. However, the spacing between views and padding wasn't what I wanted. So I wrapped some of the views inside the Section with a VStack.

But first, this is how my view SectionView looks:

struct SectionView<Content: View>: View {
    
    let title: String
    @ViewBuilder var content: () -> Content
    
    var body: some View {
        Section {
            Text(title)
                .font(.title3.bold())

            content()
        }
        .listRowInsets(EdgeInsets(top: 10, leading: 20, bottom: 10, trailing: 20))
        .listRowBackground(Color.clear)
        .listRowSeparator(.hidden)
        .contentShape(.rect)
    }
}

Below was in a separate view:

SectionView(title: "Title") {
Group {
   HStack {
      // Stuff here
   }
            
    if let selectedMonth {
         VStack(alignment: .leading, spacing: 10) {
           // Stuff here
         }
    }

}
.animation(.smooth, value: selectedMonth)
}

This, however, broke the animations again when the VStack appears. It went back to being jerky. So instead of wrapping the content inside of a VStack, I created an extension to do the same thing.

extension View {
    
    @ViewBuilder
    func condensed() -> some View {
        VStack(alignment: .leading, spacing: 10, content: {
            self
        })
    }
}

So now instead of wrapping it in a VStack, I do this:

if let selectedMonth {
 Group {
     // Stuff here
   }
   .condensed()
}

The animations look good again. I just can't figure out why that is. Can anyone help me understand this?