Why does the squares get disappear when the view get scaled?

The following code runs without throwing any errors.
The code has two views, the content view shows the child view Squares.
It creates new black squares when the button is clicked, then when you click on them the view gets scaled (magnified).
The issue is the black squares disappear when scaling.

I tried it with only one view, then it scales with the squares, but once I embed the code as a seperate view, then the squares gets disappear.

I want the parent view to scale with all the child views embedded in it without disappearing.

import SwiftUI
import Combine

enum ColumnTypes {
   case Square, Circular
}

final class ColumnsArrayObservedMain: ObservableObject {
    @Published var columnsArray : [ColumnsModelMain] = []
    @Published var randomPosition: CGPoint = CGPoint(x: 0, y: 0)
}

struct ColumnsModelMain: Identifiable {
    let id = UUID()  
    @State var columnWidth: Int
    @State var columnLength: Int
    @State var columnHeight: Int
    @State var columnType: ColumnTypes
    @State var columnPosition: CGPoint
    
 }

struct ContentView: View {
    
    @State var scaleby = 2.0
    @State var scalingEnabled = true;
    
    var body: some View {
        VStack (alignment: .center) {
                        
Squares()
                
        }
        .scaleEffect(scaleby)
                     .onTapGesture {
                         if scalingEnabled == true {
                             withAnimation {scaleby *= 2}
                         }
                     }
        .frame(width: 400, height: 400)
    }
}

struct Squares: View {
    
    @ObservedObject private var columnsArrayObservedObjectLocal = ColumnsArrayObservedMain()
    @State private var columnPosition: CGPoint = CGPoint(x: 0, y: 0)
    @State private var recColour: Color = .black
    @State private var dragAmount: CGPoint?
    
    
    
    var body: some View {
        VStack {
            ZStack {
                ForEach(columnsArrayObservedObjectLocal.columnsArray, id: \.id) { column in
                    
                    
                    Rectangle ()
                        .fill (Color.black)
                        .frame(width: 20, height: 20)
                        .position(column.columnPosition)
                    
                }
                
            }
            .frame(width: 200, height: 200, alignment: .center)
            
            
            
            Button ("Append last") {
                
                columnsArrayObservedObjectLocal.columnsArray.append(ColumnsModelMain( columnWidth: 10, columnLength: 100, columnHeight: 10, columnType: ColumnTypes.Square, columnPosition: columnsArrayObservedObjectLocal.randomPosition))
                
                columnsArrayObservedObjectLocal.randomPosition = CGPoint(x: CGFloat.random(in: 1...400), y: CGFloat.random(in: 1...400))
               
            }
        }
        
    }
    
}

in Squares use:

@StateObject private var columnsArrayObservedObjectLocal = ColumnsArrayObservedMain()

instead of @ObservedObject private ....

They will not disappear, because using @StateObject, from the docs:
SwiftUI creates a new instance of the model object only once during the lifetime of the container that declares the state object., as opposed to be re-created every time the view changes.