How to animate both offset axes

How can i animate both .offset() axes independently? This looks like a bug right? The blue should keep bouncing up and down but the y animation stops once I try to animate the x offset.

@State var offsetX = 0.0
@State var offsetY = 0.0
var body: some View {
    VStack {
        Color.blue
            .frame(width: 50, height: 50)
            .offset(x: offsetX, y: offsetY)
            .onAppear {
                withAnimation(.easeInOut.repeatForever(autoreverses: true)) {
                    offsetY = 300
                }
                
                DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
                    withAnimation {
                        offsetX = 100
                    }
                }
            }
    }
}