ScrollViewReader anchor center creates free space

Question

I want to zoom in on a specific element in the scrollview. I want it to be an anchor center. When zooming to the upper left elements, no problem, it works properly. But when you zoom in on the top right and bottom elements, space is created around it. I showed in the pictures. how can i solve this? thank you.

            GeometryReader { geo in
                ScrollView(detect.scrolID != nil ? [.horizontal,.vertical] : []) {
                    ScrollViewReader { reader in
                        BoardView(changeFrame: self.changeFrame, spotFrames: $spotFrames)
                            .frame(width: detect.scrolID != nil ? geo.size.width  * 2 : geo.size.width , height:  detect.scrolID != nil ? geo.size.width * 2 : geo.size.width)
                            .onChange(of: detect.scrolID){ value in
                                if value != nil {
                                    if camerazoom{
                                        reader.scrollTo(value, anchor: .center)
                                    }
                                }
                            }
                    }
                }
                .background(Color.blue)
            }

first loaded version of the page

Works correctly when zooming in on top left elements

When zooming to the following elements, these gaps appear