SwiftUI RotationEffect unexpected behaviour

Why is my RedArrow view rotating about the centre of the BlueArrow and not itself? What I expect to happen is for the RedArrow to end up at the bottom right corner facing up.

This could be achieved by rotating the RedArrow about its own centre and then rotating the RedArrow about the BlueArrows centre. But if I remove the outer rotation, it is clear that the RedArrow is being rotated about the BlueArrows centre twice thus returning it to its starting point.

In my actual app I don't need the BlueArrow to rotate at all so if there is a way of "inverting" the position modifier, this would also achieve my goal. By "inverting" I mean that instead of measuring the position(x:25, y: 25) from the top left corner of ContentView (towards the centre of the RedArrow), it would measure from the bottom right corner flipping the direction of the x and y axis.

struct BlueArrow: View {
    var body: some View {
        Image(systemName: "arrowshape.up.fill")
            .resizable()
            .frame(width: 200, height: 200)
            .foregroundColor(.blue)
    }
}

struct RedArrow: View {
    var body: some View {
        Image(systemName: "arrowshape.up.fill")
            .resizable()
            .frame(width: 50, height: 50)
            .foregroundColor(.red)
            .position(x:25, y: 25)
            
    }
}

struct ContentView: View {
    @State var rotation: Double = 0
    var body: some View {
        VStack {
            Button("flip") {
                rotation = rotation == 0 ? 180 : 0
            }
            BlueArrow()
                .overlay {
                    RedArrow()
                        .rotationEffect(.degrees(rotation), anchor: .center)
                }
                .rotationEffect(.degrees(rotation), anchor: .center)
        }
    }
}