Swift 5 Compositional Layout - itemSize and groupSize distorting item subViews

Question

I am using CompositionalLayout for my collectionView to create a horizontal scroll view within some detailView in my app. I need the items to hold round imageViews where I plan to show user's profile pictures. I made a custom class to represent the items that will be in the group in this specific section of the collectionView. I know i'm properly rounding the imageView inside my customCell but the problem is that the imageView inside the cell is being distorted in a weird manner for each different item in the group - I notice every time I change the values of itemSize and groupSize the imageViews get distorted in another form.

What I am trying to achieve:

What I am getting:

This is my code for the CollaboratorsLayoutSection:

func generateCollaboratorsLayout(isWide: Bool) -> NSCollectionLayoutSection {
        let itemSize = NSCollectionLayoutSize(widthDimension: .absolute(120),
                                              heightDimension: .absolute(160))

        let item = NSCollectionLayoutItem(layoutSize: itemSize)

        let groupSize = NSCollectionLayoutSize(
            widthDimension: .absolute(150),
            heightDimension: .absolute(120))
        let group = NSCollectionLayoutGroup.vertical(
            layoutSize: groupSize,
            subitem: item,
            count: 1)
        group.contentInsets = NSDirectionalEdgeInsets(
            top: 5,
            leading: 5,
            bottom: 5,
            trailing: 5)

        let headerSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(44))
        let sectionHeader = NSCollectionLayoutBoundarySupplementaryItem(
            layoutSize: headerSize,
            elementKind: ProjectDetailViewController.sectionHeaderElementKind, alignment: .top)

        let section = NSCollectionLayoutSection(group: group)
        section.boundarySupplementaryItems = [sectionHeader]
        section.orthogonalScrollingBehavior = .groupPaging

        return section
    }

This is my Custom Cell being used for the items:

class CollaboratorsCell: UICollectionViewCell {
    static let reuseIdentifier: String = "CollaboratorsCell"

    // MARK: UILabel properties on each collaborators
    let usernameLabel = UILabel()
    let roleLabel = UILabel()
    let memberPhotoView = UIImageView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
    let contentContainer = UIView()

    override init(frame: CGRect) {
        super.init(frame: frame)

    }

    func configureCollaboratorCell(with project: Project, indexPath: IndexPath) {
        contentContainer.translatesAutoresizingMaskIntoConstraints = false

        contentView.addSubview(memberPhotoView)
        contentView.addSubview(contentContainer)
        contentContainer.backgroundColor = .blue

        memberPhotoView.translatesAutoresizingMaskIntoConstraints = false
        memberPhotoView.backgroundColor = .green
        memberPhotoView.layer.masksToBounds = false
        memberPhotoView.layer.cornerRadius = memberPhotoView.bounds.width / 2
        memberPhotoView.clipsToBounds = true
        contentContainer.addSubview(memberPhotoView)

        usernameLabel.translatesAutoresizingMaskIntoConstraints = false
        usernameLabel.text = project.members[indexPath.row]
        usernameLabel.textColor = .white
        usernameLabel.font = UIFont(name: "Avenir-Medium", size: 14)
        usernameLabel.adjustsFontForContentSizeCategory = true
        contentContainer.addSubview(usernameLabel)

        roleLabel.translatesAutoresizingMaskIntoConstraints = false
        roleLabel.text = "ROLE: "
        roleLabel.textColor = .white
        roleLabel.font = UIFont(name: "Avenir", size: 12)
        roleLabel.adjustsFontForContentSizeCategory = true
        contentContainer.addSubview(roleLabel)

        let spacing = CGFloat(10)
        NSLayoutConstraint.activate([
            contentContainer.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
            contentContainer.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
            contentContainer.topAnchor.constraint(equalTo: contentView.topAnchor),
            contentContainer.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),

//            memberPhotoView.leadingAnchor.constraint(equalTo: contentContainer.leadingAnchor, constant: spacing),
//            memberPhotoView.trailingAnchor.constraint(equalTo: contentContainer.trailingAnchor, constant: spacing),
            memberPhotoView.topAnchor.constraint(equalTo: contentContainer.topAnchor, constant: 0),
            memberPhotoView.centerXAnchor.constraint(equalTo: self.contentContainer.centerXAnchor),
//            memberPhotoView.centerYAnchor.constraint(equalTo: self.contentContainer.centerYAnchor),

            usernameLabel.topAnchor.constraint(equalTo: memberPhotoView.bottomAnchor, constant: spacing),
            usernameLabel.leadingAnchor.constraint(equalTo: memberPhotoView.leadingAnchor),
            usernameLabel.trailingAnchor.constraint(equalTo: memberPhotoView.trailingAnchor),

            roleLabel.topAnchor.constraint(equalTo: usernameLabel.bottomAnchor),
            roleLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
            roleLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
            roleLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
        ])
    }

    required init?(coder: NSCoder) {
        fatalError("Not happening in CollaborrabotsCell")
    }

}

Answer 1

Turns out the issue was with autoLayout constraints, once I added constraints for the width and height of the memberPhotoView I began getting perfect circles for the items.

I'm still not sure why compositionalLayout distorted the circles when they didn't have these constraints.