how to custom DatePicker Label

I have a custom UI to display date (for user birthday) and want if the user presses each part of the label , the date selection is displayed, the current issue is , when I try to reduce the DatePicker opacity or set the colorMultipli to clear color, it still clickable on the date area, while my object is a fullWidth object, how can I fix it?

This is the code:

 VStack(alignment: .leading, spacing: 8) {
                Text("Birthday")
                    .font(.SFProText.font(type: .medium, size: 13))
                    .foregroundStyle(Color(uiColor: .label))
                
                HStack(alignment: .center) {
                    Text(userProfileAccountInfoviewModel.birthday.getShortFormat(format: "dd MMM yyyy"))
                        .font(.SFProText.font(type: .medium, size: 13))
                        .foregroundColor(Color(uiColor: .label))
                        .padding(.horizontal, 13)
                    
                    Spacer()
                }
                .frame(height: 44)
                
                .contentShape(Rectangle())
                .overlay {
                    HStack {
                        
                        DatePicker(selection: $userProfileAccountInfoviewModel.birthday, displayedComponents: .date) {}
                            .labelsHidden()
                            .colorMultiply(.clear)
                            .background(Color.clear)
                            .foregroundStyle(Color.baseBackgroundSecondary)
                            .frame(maxWidth: .infinity)
                            .contentShape(Rectangle())
                          //  .opacity(0.011)
                        
                        Spacer()
                    }
                    
                }
                .background(Color.baseBackgroundSecondary)
                .clipShape(RoundedRectangle(cornerRadius: 4))
                
            }