Multiple GeometryReader Causes problem with other GeometryReader SwiftUI

Question

I'm using two Stack and I have a UIViewRepresentable that I want to put it inside the first stack but for the width and height I'm using the GeometryReader to get the width and height so that the UIViewRepresentable will be inside the first stack. Also in the second stack I have a Rectangle and I also want to set the Rectangle's width size same as the second stack therefore I used GeometryReader again and now this one effects the frame size on the UIViewRepresentable which was in the first stack.

I'm using iOS 13.4 and Xcode 11.4

First View and First Stack:

struct BAverage: View {
    @State var bAvg = [10.3, 13.4]

    var body: some View {

        VStack(alignment: .leading, spacing: 0) {

            // MARK: Card Header
            HStack {
                Text("B Average")
                    .bold()
                    .font(.headline)
                Spacer()
            }
            .padding([.top, .horizontal])


            // MARK: Chart
            HStack {
                Spacer()
                GeometryReader { p in
                    LineChartSwiftUI(bAvg: self.$bAvg)
                        .frame(width: p.size.width, height: p.size.height)
                }
                VStack {
                    Text("Average".uppercased())
                        .bold()
                        .font(.system(size: 12))
                        .padding(.top, 10)
                    Text(String(self.bAvg.max() ?? 0.0))
                        .padding()                        
                }
                Spacer()
            }

        }
        .background(Color.green)
        .padding(.horizontal)

    }
}

Second View and Second Stack:

struct CAverage: View {

    @State var valee = 80


    var body: some View {
        VStack(alignment: .leading, spacing: 0) {

            // MARK: Card Header
            HStack {
                Text("CAverage")
                    .bold()
                    .font(.headline)
                Spacer()
            }
            .padding()

            // MARK: Chart and Average Temp
            HStack {
                Spacer()
                Text("0")
                GeometryReader { (proxy) in
                    Rectangle()
                        .foregroundColor(Color("Main"))
                        .frame(width: proxy.size.width, height: 4)
                }
                Text("100")
                VStack {
                    Text("LINE")
                }
                Spacer()
            }

        }
        .background(Color.red)
        .padding(.horizontal)
    }
}

and then I'm using these two view in an other view:

struct ContentView: View {
    var body: some View {
        NavigationView {

            ScrollView {
                    VStack {
                        BAverage()


                        Spacer()
                    }

            }
                // NavigationView Settings
                .navigationBarTitle("Status", displayMode: .automatic)
                // Accent Color
                .accentColor(Color("Main"))
        }
    }
}

You can also see in the image below: Without putting the CAverage() in ContentView:

After putting the CAverage() in ContentView: