Multiple animations interrupt/interfere with eachother - swift

Question

I attempted to apply multiple animations to an object, one that loops on a short timer and one that changes on a button press. After reducing it down to an example, it appears that multiple animations interfere with eachother (replacing all animations duration/repeatability with the most recently triggered.
Example code:
import SwiftUI
struct RectangleView: Shape {
var height: CGFloat
var width: CGFloat
var animatableData: AnimatablePair<CGFloat, CGFloat> {
get {
AnimatablePair(height, width)
}
set {
height = newValue.first
width = newValue.second
}
}
func path(in rect: CGRect) -> Path {
var path = Path()
var rect = CGRect()
rect.size.width = self.width
rect.size.height = self.height
path.addRect(rect)
return path
}
}
struct ContentView: View {
#State var width: CGFloat = 100
#State var height: CGFloat = 100
var body: some View {
VStack {
RectangleView(height: height, width: width)
.animation(.linear(duration: 30).repeatForever(), value: height)
.animation(.spring(response: 1, dampingFraction: 0.5, blendDuration: 1), value: width)
.onAppear(perform: {
height = 200
})
Button("Add width via spring", action: {
width += 10
})
}
.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Expected: Rectangle continues to grow vertically linearly over 30 seconds after clicking 'add width' button.
Actual: Rectangle springs vertically over 1 second along with the width.