I have a map which pins locations of the user when they register. The pinned location have an onTapGesture which then provides a list of users at that location. It works fine, if I click the pin that list appears or dissapears. The problem I have is if I drag the map to another pin the list data goes away but the frame of the list still exists. I tried attaching a DragGesture which works in the since it goes away temporarly but when you click another pin location the previous pin frame appears with no data.

Map(coordinateRegion: $region, annotationItems: userListVM.userVM, annotationContent: {
            item in
            // (A) PIN: OLD STYLE
            //MapPin(coordinate: item.pinLocation, tint: .accentColor)

            // (B) MARKER: NEW STYLE
            //MapMarker(coordinate: item.pinLocation, tint: .accentColor)

            // (C) CUSTOM ANNOTATION
            MapAnnotation(coordinate: item.pinLocation) {
                UserMapDynamicView(passedUserInfo: item, mapDragged: $mapDragged)
            }
        }) // END:MAP
        .gesture(
                  DragGesture()
                     .updating($dragPosition) { (value, gestureState, transaction) in
                         gestureState = CGSize(width: value.location.x - value.startLocation.x, height: value.location.y - value.startLocation.y)
                      }
                      .onChanged { value in
                        mapDragged = true
                        print("Changed: \(mapDragged)")
                      }
                      .onEnded { value in
                        mapDragged = false
                        print("Ended: \(mapDragged)")
                      }
              )

  struct UserMapDynamicView: View {
    // MARK: - PROPERTIES
    @ObservedObject var userListVM = UserListViewModel()
    var passedUserInfo: UserViewModel
    @State private var showUsers = false
    @Binding var mapDragged: Bool
    @State private var numberOfUsersAtLocation = 0

// MARK: - BODY
  var body: some View {
      VStack {
          ZStack {
              if showUsers && !mapDragged {
                  Group {
                      GeometryReader { geo in
                          List {
                              ForEach(userListVM.userLocation, id: \.id) { user in
                                  HStack {
                                      WebImage(url: URL(string: user.profileImgUrl))
                                          .resizable()
                                          .scaledToFit()
                                          .frame(width: 35, height: 35, alignment: .center)
                                          .clipShape(Circle())
                                      Text(user.fullname)
                                  } // END:HSTACK
                              }
                          } // END:LIST

                          .frame(width: 230, height: geo.size.height * CGFloat(numberOfUsersAtLocation) + 20, alignment: .center)
                          .opacity(0.6)
                          .cornerRadius(10)

                      }
                  } // END:GROUP
                  .offset(x: 20)

              } // END:IF
              Image(systemName: "mappin")
                  .font(.largeTitle)
                  .foregroundColor(.accentColor)
                  .onTapGesture {
                      userListVM.getUsersByState(state: passedUserInfo.state)
                      numberOfUsersAtLocation = userListVM.userLocation.count
                      showUsers.toggle()
                      mapDragged = false
                  }
          } // END:ZSTACK
      } // END:VSTACK