Can someone explain to me why this wouldn't work:

I have a list of items that I am creating an Annotation on a map.

                ForEach(eventItems) { item in
                    Annotation(item.permit.permitID, coordinate: item.getEventMapMarkerPosition()) {

                        ZStack {
                            Circle()
                                .stroke(.black, lineWidth: 1)
                                .fill(item.getMapMarkerColor())
                                .frame(width: 30, height: 30)
                                .overlay {
                                    Text("\(item.eventItemIndex)")
                                        .font(.footnote)
                                        .foregroundStyle(item.getMapMarkerTextColor())

                                }
                                .shadow(color: .gray, radius: 2, x: 1, y: 1)
                        }
                        .onTapGesture {
                            selectedEventItem = item
                        }

                    }
                }

This works fine. The main part here is that the item.eventItemIndex is a number that shows the item on the map related to a listview with the same item.

I am using this view to display the items in the listview and on the map and on another map. So, of course I would like to use a view:

struct MapMarkerView: View {
    @State var eventIndex : Int
    @State var fillColor : Color
    @State var textColor : Color

    var body: some View {

            Circle()
                .stroke(.black, lineWidth: 1)
                .fill(fillColor)
                .frame(width: 30, height: 30)
                .overlay {
                    Text("\(eventIndex)")
                        .font(.footnote)
                        .foregroundStyle(textColor)

                }
                .shadow(color: .gray, radius: 2, x: 1, y: 1)
    }
}

If I change my code in the ForEach when adding Annotations to replace the Circle() with this view, it will work. But when I select and item in my list view, it will change the camera to the location of the annotation.

            .onChange(of: zoomToEvent) {
                if let item = zoomToEvent
                {
                    withAnimation {
                        mapPosition = MapCameraPosition.region(MKCoordinateRegion(center: item.getEventMapMarkerPosition(), latitudinalMeters: 500, longitudinalMeters: 500))
                    }
                }
            }

zoomToEvent is a Binding:

 @Binding var zoomToEvent : DBPermitEventModel?

The issue is that the item I zoom to has the correct Title for the annotation, and when I click on the annotation, my sheet opens up corretly to the right item, but the Text Label of my annotation changes to a random index number.

If I have the Circle() inside the annotation and not in an external view, it works great. If I use the view, it changes the index text.

I am thinking this is due to the underlying MKMapping stuff where it uses the reuseidentifier.