ContextMenu uses incorrect cornerRadius even after specifying contentShape

struct CardView: View {
    private var name: String = "Random Name"
    private var color: Color = Color.red
    
    private var CardContent: some View {
        HStack(alignment: .top) {
            Text(name)
                .font(.system(size: 16, weight: .medium, design: .rounded))
                .frame(width: 110, height: 80, alignment: .top)
        }
        .padding(.top, 20)
        .frame(width: 200, height: 190, alignment: .top)
        .background(color)
        .clipShape(RoundedRectangle(cornerRadius: 30, style: .continuous))
    }
    
    var body: some View {
        CardContent
            .contentShape(RoundedRectangle(cornerRadius: 30, style: .continuous))
            .contextMenu {
                Button(action:{}){
                    HStack {
                        Image(systemName: "trash")
                            .foregroundColor(Color.red)
                        Text("Delete")
                    }
                }
        }
        .shadow(color: color.opacity(0.5), radius: 10, x: 10, y: 10)
    }
}

But when I long press the View is clipped incorrectly

Also, why is the trashcan image not coloured red? Is it a ContextMexu quirk?