Move the circle according the arrow

Hello everyone,
Can someone tell me how to move the circle in the same position of the arrow (like to go up if I press up, down if I press down... and so right if I press right) but it doesn't go right, I can't know why. Please can someone help me to figure out this?

Here's the code:

import SwiftUI
import PlaygroundSupport

struct ContentView: View {

    @State var offset: CGFloat = 0

    var body: some View {

        Circle()
            .frame(width: 80, height: 80)
            .position(x: 140, y: 140 + offset)

        Spacer(minLength: 20)

        Button(
            action: {
                offset += 20             
            }, label: {
                Image(systemName: "arrowtriangle.down.circle.fill")
                    .resizable()
                    .foregroundColor(.blue)
                    .frame(width: 70, height: 70)
                    .padding()
            }
        )

        Button(
            action: {
                offset += 20 
        

            }, label: {

                Image(systemName: "arrowtriangle.right.circle.fill")
                    .resizable()
                    .foregroundColor(.blue)
                    .frame(width: 70, height: 70)
                    .padding()
            }
        )
    }
}


PlaygroundPage.current.setLiveView(ContentView())

Thanks in advance.

Move the circle according the arrow
 
 
Q