Appear Circles in ZStack exact image position as navigationSplitView (.balanced) opens or close

Question

    struct Animal: Hashable {
    let name: String
    let description: String
}

struct ContentView1: View {
    let animals = [
        Animal(name: "Coyote", description: "The coyote is a species of canine native to North America..."),
        Animal(name: "Gila Monster", description: "The Gila Monster is a species of venomous lizard native to the southwestern United States..."),
        Animal(name: "Roadrunner", description: "The roadrunner is a fast-running bird found in the southwestern United States and Mexico...")
    ]
    @State private var selectedAnimal: (Animal)? = nil
    
    var body: some View {
        NavigationSplitView {
            List(animals, id: \.name, selection: $selectedAnimal) { animal in
                NavigationLink(animal.name, value: animal)
            }
            .navigationTitle("Arizona Animals")
        } detail: {
            DetailView(animal: selectedAnimal ?? animals[0])
            
        }
        .navigationSplitViewStyle(.balanced)
    }
}

struct DetailView: View {
    let animal: Animal
    let image = UIImage(named: "test")
    let data = [(155.5000457763672, 340.70672607421875),
                (260.234619140625, 341.8070068359375),
                (132.84449768066406, 363.4249267578125),
                (176.1597442626953, 355.15069580078125),
                (241.34222412109375, 355.786376953125),
                (281.90435791015625, 364.7125244140625),
                (209.46426391601562, 402.5670166015625),
                (195.74551391601562, 388.2469482421875),
                (179.63951110839844, 374.610595703125),
                (223.13531494140625, 388.39453125),
                (238.7168731689453, 375.0908203125),
                (117.08203125, 427.7219543457031),
                (115.65000915527344, 437.1592712402344),
                (120.7928695678711, 443.9233093261719),
                (301.0545654296875, 427.9809265136719),
                (298.2004089355469, 437.69793701171875),
                (293.6685791015625, 444.44207763671875)]
    var body: some View {
        let cgPoints = data.map { CGPoint(x: CGFloat($0.0), y: CGFloat($0.1)) }
        GeometryReader { reader in

            ZStack {
                Image(uiImage: image!)
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: reader.size.width, height: reader.size.height)
                VStack {
                    Text(animal.name)
                        .font(.largeTitle)
                    Text(animal.description)
                        .font(.body)
                }
                ForEach(cgPoints, id: \.self) { vertex in
                    Circle()
                        .fill(Color.red)
                        .frame(width: 13, height: 13)
                        **.position(vertex)**
                }

            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .padding()
            .navigationTitle("Animal Details")
        }
    }

}

#Preview {
    ContentView1()
}

** we have image in background and want to show circle on some points of image. how can i fix showing circles on same position as sidebar opens of close? it should be at same position on the image?

I have used the approach to calculate the scale factor from newWidth and oldWidth but it moves the circles further away from the desired point where it was. **