SwiftUI Animation is not working properly when it’s in a stack

Question

I'm trying to make a car animation by composing some view. First I gave an animation rotationeffect with 0.5 speed to the tire so it would rotate. Then I put the car body and tire into a zstack.

struct CarBodyView: View {
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                CarWindow()
                    .background(
                        HalfCircle()
                            .foregroundColor(.red)
                    )
                    .background(
                        CarShape()
                            .foregroundColor(.red)
                    )
                HStack {
                    Spacer()
                    Tire(width: geometry.size.width/3.5)
                    Spacer()
                    Tire(width: geometry.size.width/3.5)
                    Spacer()
                }
                .frame(height: geometry.size.height)
                .offset(y: geometry.size.height/2 - geometry.size.width/3/6)
            }
        }
    }
}

After that I want to make the car to move from right to left, so I give animation to it.

struct RoadWithCar: View {
    let entrance: HorizontalAlignment
    @State private var isMoving = false
    
    var body: some View {
        ZStack {
            Road()
            CarBodyView()
                .frame(width: 140, height: 70)
                .offset(x: isMoving ? -UIScreen.main.bounds.midX-70 : UIScreen.main.bounds.midX+100, y: -6)
                .animation(.linear(duration: 2.0).repeatForever(autoreverses: false), value: isMoving)
                .task {
                    isMoving.toggle()
                }
        }
    }
}

At first I called RoadWithCar outside a stack it works just fine. But when I put it inside a stack it's started to fall apart. The tire is getting the position animation but using the speed from its origin that's supposed to be the speed of its rotation. How to make this work? Bcs I need to put it inside a vstack

Here’s how it looks inside a navigationview

with the code

struct ContentView: View {
    var body: some View {
                NavigationView {
                        RoadWithCar(entrance: [HorizontalAlignment.leading, HorizontalAlignment.trailing].randomElement()!)
        }
    }
}

struct RoadWithCar: View {
    let entrance: HorizontalAlignment
    @State private var isMoving = false
    
    var body: some View {
        ZStack {
            Road()
            CarBodyView()
                .frame(width: 140, height: 70)
                .offset(x: isMoving ? -UIScreen.main.bounds.midX-70 : UIScreen.main.bounds.midX+100, y: -6)
                .animation(.linear(duration: 2.0).repeatForever(autoreverses: false), value: isMoving)
                .task {
                    isMoving.toggle()
                }
        }
    }
}

and here’s when it’s inside a stack/outside navigationview

with the code

struct ContentView: View {
    var body: some View {
                NavigationView {
                    VStack {
                        RoadWithCar(entrance: [HorizontalAlignment.leading, HorizontalAlignment.trailing].randomElement()!)
            }
        }
    }
}

struct RoadWithCar: View {
    let entrance: HorizontalAlignment
    @State private var isMoving = false
    
    var body: some View {
        ZStack {
            Road()
            CarBodyView()
                .frame(width: 140, height: 70)
                .offset(x: isMoving ? -UIScreen.main.bounds.midX-70 : UIScreen.main.bounds.midX+100, y: -6)
                .animation(.linear(duration: 2.0).repeatForever(autoreverses: false), value: isMoving)
                .task {
                    isMoving.toggle()
                }
        }
    }
}