I had done this view in swift ui

            ZStack {
                Circle()
                    .stroke(lineWidth: 2)
                    .foregroundStyle(.black)
                    .frame(width: firstCircleWidth, height: firstCircleWidth)
                    .overlay(alignment: .top) {
                        Rectangle()
                            .foregroundStyle(.blue)
                            .frame(width: 2, height: firstCircleWidth / 2)
                            .padding(.horizontal)
                            .overlay(alignment: .trailing) {
                                Button {
                                    selectedRadius = .radius1
                                } label: {
                                    Text("r")
                                        .font(.title)
                                        .foregroundStyle(.blue)
                                }
                            }
                    }.overlay {
                        Circle()
                            .foregroundStyle(.blue)
                            .frame(width: 10)
                            .padding()
                            .padding(10)
                            .overlay(alignment: .topTrailing) {
                                Text("q")
                                    .font(.title)
                                    .foregroundStyle(.blue)
                            }.offset(y: -firstCircleWidth / 2)
                    }
                
                Circle()
                    .stroke(lineWidth: 2)
                    .foregroundStyle(.black)
                    .frame(width: secondCircleWidth, height: secondCircleWidth)
                    .overlay(alignment: .top) {
                        Rectangle()
                            .foregroundStyle(.blue)
                            .frame(width: 2, height: secondCircleWidth / 2)
                            .padding(.horizontal, 25)
                            .overlay(alignment: .leading) {
                                Button {
                                    selectedRadius = .radius2
                                } label: {
                                    Text("R")
                                        .font(.title)
                                        .foregroundStyle(.blue)
                                }
                            }
                    }.overlay {
                        Circle()
                            .foregroundStyle(.blue)
                            .frame(width: 10)
                            .padding()
                            .padding(10)
                            .overlay(alignment: .topTrailing) {
                                Text("Q")
                                    .font(.title)
                                    .foregroundStyle(.blue)
                            }.offset(y: -secondCircleWidth / 2)

                    }.rotationEffect(.degrees(-30))
            }

Everything was found until I moved it into a ForEach loop

            ZStack {
                ForEach(pointCharges, id: .self) { pointCharge in
                    let rotationEffect = Double(rotationConstant * (pointCharges.count - 1))
                    let frameSize = Double(150 + (circleSizeConstant * pointCharges.count))
                                            
                    Circle()
                        .stroke(lineWidth: 2)
                        .foregroundStyle(.black)
                        .frame(width: frameSize)
                        .overlay(alignment: .top) {
                            Rectangle()
                                .foregroundStyle(.blue)
                                .frame(width: 2, height: frameSize / 2)
                                .padding(.horizontal, 25)
                                .overlay(alignment: .leading) {
                                    Button {
//                                        selectedRadius = .radius2
                                    } label: {
                                        Text(pointCharge.radius.name)
                                            .font(.title)
                                            .foregroundStyle(.blue)
                                    }
                                }
                        }.overlay {
                            Circle()
                                .foregroundStyle(.blue)
                                .frame(width: 10)
                                .padding()
                                .padding(10)
                                .overlay(alignment: .topTrailing) {
                                    Text(pointCharge.name)
                                        .font(.title)
                                        .foregroundStyle(.blue)
                                }.offset(y: -frameSize / 2)
                        }.rotationEffect(.degrees(rotationEffect))
                }
            }

I have no idea why that happens even though, I applied a stroke, so it should only have the border, how to fix it? I want the user to add circles with the tap of a button, so I can’t have it done manually, I was just testing at the beginning.