Weird animation bug inside scrollview with lazyhstack

Question

I have a ForEach of itemView() inside a lazyHStack which is inside a Scrollview,

In the itemView, I have a a tap gesture that adds an item to an array and then runs a checkIfSelected() func, which compares if the item is selected, if so, you see a checkmark and changes the background of the view and adds an outline as you can see.

The other part is the %Discount Badge as you can see for some items, that are in discount, the problem is as you can see the discount badge is kinda flying around when scrolling and then sets where it goes. im using .transition and .animation, this doesn't happen of course with the checkmark as its always there and just the .opacity is changed to 0, but as im using .transition(.move(.top) ) on the discount badge, it animates correctly accordingly when the checkmark appears you see it coming from the top down and viceversa when the checkmark is not present.

I have tried different approaches but no luck.

VStack(spacing:5) {
    LinearGradient.defaultOrangeRedGradient
        .mask(Image(systemName: "checkmark.circle.fill")
            .resizable()
            .aspectRatio(contentMode: .fit)
        ).background( Circle().fill(Color.white).frame(width:20,height:20))
        .opacity(isSelected ? 1 : 0)
        .frame(width: 20, height: 20)
        .zIndex(4)

    
      
   
    
   if( item.isOffer) {
        VStack {
        Image( colorScheme == .dark ? item.isOfferIconDark : item.isOfferIcon)
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width:20,height:20)
            .opacity(item.isOffer ? 1 : 0)
            //.transition(.opacity)
        }.transition(.move(edge: .top))
                .animation(.easeInOut(duration: 0.2))
                .zIndex(2)
        }
}