Xcode UIStackView Weird LayoutConstraints Issue

Question

I am adding a MapView (bascially a UIView) inside an empty UIStackView inside an empty UIScrollView. I implemented it the following way:

    private func setupScrollView() {
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(scrollView)
        
        let frameLayoutGuide = scrollView.frameLayoutGuide
        
        NSLayoutConstraint.activate([
            frameLayoutGuide.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            frameLayoutGuide.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            frameLayoutGuide.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            frameLayoutGuide.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
        ])
    }

    private func setupMainStackView() {
        mainStackView.axis = .vertical
        mainStackView.translatesAutoresizingMaskIntoConstraints = false
        
        scrollView.addSubview(mainStackView)
        
        let contentLayoutGuide = scrollView.contentLayoutGuide
        
        NSLayoutConstraint.activate([
            mainStackView.widthAnchor.constraint(equalTo: view.widthAnchor),
            mainStackView.leadingAnchor.constraint(equalTo: contentLayoutGuide.leadingAnchor),
            mainStackView.trailingAnchor.constraint(equalTo: contentLayoutGuide.trailingAnchor),
            mainStackView.topAnchor.constraint(equalTo: contentLayoutGuide.topAnchor),
            mainStackView.bottomAnchor.constraint(equalTo: contentLayoutGuide.bottomAnchor)
        ])
        
        setupMapView()
    }

    private func setupMapView() {
        mapView.translatesAutoresizingMaskIntoConstraints = false
        mapView.isUserInteractionEnabled = false
        mainStackView.addArrangedSubview(mapView)
        
        NSLayoutConstraint.activate([
            // whenever the constant is set to a value other then zero, constraint issues pop up in the console
            mapView.widthAnchor.constraint(equalTo: mainStackView.widthAnchor, constant: -10), 
            mapView.centerXAnchor.constraint(equalTo: mainStackView.centerXAnchor),
            mapView.heightAnchor.constraint(equalTo: mapView.widthAnchor, multiplier: 0.618)
        ])
    }

However, whenever the constant of the widthAnchor constraint of the mapView is set to any value other than zero, constraint issues pop up in the console. I am doing this because I want paddings on both the left and right edges of the mapView.

[LayoutConstraints] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. 
    Try this: 
        (1) look at each constraint and try to figure out which you don't expect; 
        (2) find the code that added the unwanted constraint or constraints and fix it. 
(
    "<NSLayoutConstraint:0x282b37070 MKMapView:0x139835800.width == UIStackView:0x138a13480.width - 42.8   (active)>",
    "<NSLayoutConstraint:0x282b372a0 MKMapView:0x139835800.centerX == UIStackView:0x138a13480.centerX   (active)>",
    "<NSLayoutConstraint:0x282b1c190 'UISV-canvas-connection' H:[MKMapView:0x139835800]-(0)-|   (active, names: '|':UIStackView:0x138a13480 )>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x282b372a0 MKMapView:0x139835800.centerX == UIStackView:0x138a13480.centerX   (active)>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKitCore/UIView.h> may also be helpful.
2020-12-26 19:01:44.048851-0800 LiQing Watercolor[16247:4990949] [LayoutConstraints] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. 
    Try this: 
        (1) look at each constraint and try to figure out which you don't expect; 
        (2) find the code that added the unwanted constraint or constraints and fix it. 
(
    "<NSLayoutConstraint:0x282b37070 MKMapView:0x139835800.width == UIStackView:0x138a13480.width - 42.8   (active)>",
    "<NSLayoutConstraint:0x282b1c140 'UISV-canvas-connection' UIStackView:0x138a13480.leading == MKMapView:0x139835800.leading   (active)>",
    "<NSLayoutConstraint:0x282b1c190 'UISV-canvas-connection' H:[MKMapView:0x139835800]-(0)-|   (active, names: '|':UIStackView:0x138a13480 )>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x282b1c140 'UISV-canvas-connection' UIStackView:0x138a13480.leading == MKMapView:0x139835800.leading   (active)>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKitCore/UIView.h> may also be helpful.

I also found that my code works perfectly when adding the mapView using mainStackView.addSubview(mapView) instead of mainStackView.addArrangedSubview(mapView).

If anyone knows how to resolve this issue that would be great! Thanks.