ios – Circles Overlapping In Swift Ui

I had performed this view in swift ui

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

                    }.rotationEffect(.levels(-30))
            }

Every part was discovered till I moved it right into a ForEach loop

            ZStack {
                ForEach(pointCharges, id: .self) { pointCharge in
                    let rotationEffect = Double(rotationConstant * (pointCharges.rely - 1))
                    let frameSize = Double(150 + (circleSizeConstant * pointCharges.rely))
                                            
                    Circle()
                        .stroke(lineWidth: 2)
                        .foregroundStyle(.black)
                        .body(width: frameSize)
                        .overlay(alignment: .high) {
                            Rectangle()
                                .foregroundStyle(.blue)
                                .body(width: 2, top: frameSize / 2)
                                .padding(.horizontal, 25)
                                .overlay(alignment: .main) {
                                    Button {
//                                        selectedRadius = .radius2
                                    } label: {
                                        Textual content(pointCharge.radius.title)
                                            .font(.title)
                                            .foregroundStyle(.blue)
                                    }
                                }
                        }.overlay {
                            Circle()
                                .foregroundStyle(.blue)
                                .body(width: 10)
                                .padding()
                                .padding(10)
                                .overlay(alignment: .topTrailing) {
                                    Textual content(pointCharge.title)
                                        .font(.title)
                                        .foregroundStyle(.blue)
                                }.offset(y: -frameSize / 2)
                        }.rotationEffect(.levels(rotationEffect))
                }
            }

I do not know why that occurs despite the fact that, I utilized a stroke, so it ought to solely have the border, methods to repair it? I would like the person so as to add circles with the faucet of a button, so I can not have it performed manually, I used to be simply testing at the start.