SwiftUI Menu at all times seems at prime of label – tips on how to present it at middle of tappable space?

I am constructing a photograph add element in SwiftUI the place your complete rectangular space must be tappable to point out a Menu with choices (Picture Library / Digital camera).

The issue: It doesn’t matter what I strive, the Menu popup at all times seems anchored to the TOP of the label, however I want it to look on the CENTER of my tappable rectangle.

Present conduct:

Anticipated conduct: Menu ought to seem within the middle of this space:

My present code:

import SwiftUI
import PhotosUI

struct PhotoUploaderExample: View {
    @State personal var selectedImage: UIImage?
    @State personal var showingImagePicker = false
    @State personal var showingCamera = false
    
    personal let placeholderSide: CGFloat = UIScreen.fundamental.bounds.width - 32
    
    var physique: some View {
        VStack(alignment: .main, spacing: 12) {
            Textual content("Add a photograph")
                .font(.system(measurement: 20, weight: .semibold))
            
            photoUploadArea
        }
        .padding(.horizontal, 16)
        .sheet(isPresented: $showingImagePicker) {
            // Picture library picker
        }
        .fullScreenCover(isPresented: $showingCamera) {
            // Digital camera
        }
    }
    
    var photoUploadArea: some View {
        ZStack {
            // Background rectangle with dashed border
            RoundedRectangle(cornerRadius: 24)
                .fill(Shade.grey.opacity(0.05))
                .strokeBorder(
                    Shade.grey.opacity(0.3),
                    model: StrokeStyle(lineWidth: 2, sprint: [8, 5])
                )
                .body(width: placeholderSide, top: placeholderSide)
            
            // Content material overlay - icon and button
            VStack(spacing: 12) {
                Picture(systemName: "picture.badge.plus.fill")
                    .resizable()
                    .scaledToFit()
                    .body(width: 48, top: 48)
                
                Textual content("Add a photograph")
                    .font(.system(measurement: 15, weight: .medium))
                    .padding(.horizontal, 20)
                    .padding(.vertical, 8)
                    .background(Shade.grey.opacity(0.1))
                    .clipShape(Capsule())
            }
            
            // Menu - stretched to fill total space
            Menu {
                Button(motion: {
                    showingImagePicker = true
                }) {
                    Label("Picture Library", systemImage: "picture.on.rectangle")
                }
                
                Button(motion: {
                    showingCamera = true
                }) {
                    Label("Digital camera", systemImage: "digicam")
                }
            } label: {
                Shade.clear
                    .contentShape(Rectangle())
            }
            .body(width: placeholderSide, top: placeholderSide)
        }
    }
}

#Preview {
    PhotoUploaderExample()
}

What I’ve tried:

• Wrapping Menu in several container views
• Utilizing Shade.clear as label with .contentShape(Rectangle())
• Inserting a small invisible anchor at middle

Questions:

• Is there any native strategy to management Menu popup anchor place?
  On the lookout for native SwiftUI options solely – no third-party libraries please.

Aim: Tapping anyplace contained in the rectangle (not simply the icon/button) ought to present the Menu centered inside that space.