Как проскролить в нужную позицию если указан .position?

Если у Image есть указание в какой позиции он должен стоять, то скроллинг работает неправильно, он скролит туда, где Image бы стоял без указания .position. В примере синий бейсбольный мяч и маленькая звезда, при нажатии на кнопку, всё должно было просмолиться, чтобы звезда была в центре, но этого не происходит. Что я делаю не так?

struct ContentView: View {
    
    var body: some View {
        ScrollViewReader { proxy in
            Button("Scroll to small Image") {
                withAnimation {
                    proxy.scrollTo(111, anchor: .center)
                }
            }
            
            ScrollView([.horizontal, .vertical]) {
                ZStack {
                    Image(systemName: "baseball.circle")
                        .resizable()
                        .aspectRatio(1, contentMode: .fit)
                        .frame(width: 800, height: 1200)
                        .foregroundColor(.blue)
                    
                    Image(systemName: "star")
                        .resizable()
                        .aspectRatio(1, contentMode: .fit)
                        .frame(width: 80, height: 80)
                        .position(CGPoint(x: 180, y: 400)) // <----- not scrolling correctly to this position
                        .foregroundColor(.red)
                        .id(111)
                }
                .scrollTargetLayout()
            }
        }
    }
}