i’m making a comments screen, where the user can see the comments of a post as well as their replies. when i click “View x more replies”, i’d like for the replies to expand with an animation. now, for some reason, when i use withAnimation, the animation doesn’t work on first click, but works after second click & continues working after that. i’m not quite sure what might be causing it, and i’d appreciate any help/suggestions

here’s the video where i simulate the problem

where i call withAnimation:

@State var showReplyClicked: Bool = false

Button(action: {
   homepageViewModel.getPostCommentReplies(postId: comments.postId, commentId: comments.commentId)
    withAnimation {
       showReplyClicked.toggle()
    }
 }) {
    Text("View (comments.replyCount) more (comments.replyCount == 1 ? "reply" : "replies")")
       .fontWeight(.semibold)
       .foregroundStyle(Color("DarkGray"))
       .font(.system(size: 14))
 }

the view that appears when showReplyClicked becomes true:

 if showReplyClicked {
    ForEach(homepageViewModel.commentReplies.indices, id: .self) { (index: Int) in
       HStack {
          IndividualCommentReplyCardView(replies: homepageViewModel.commentReplies[index], homepageViewModel: homepageViewModel)
       }
    }
 }

my CommentReplies model:

struct CommentReplies: Hashable {
   var commentId: String
   var commentDate: String
   var commentMessage: String
   var postId: String
   var repliedTo: String
   var userId: String
   var userHandle: String
   var userProfilePicture: String
   var userRole: String
   var replyCount: Int
}

please let me know if you need any additional code!