I am trying to create a custom iconView using SwiftUI for may Google Maps markers:

struct CustumMarkerView: View {
  let inter15_500 = Font.inter(size: 15, weight: 500)
  let destination: POILocation
  
  var iconName: String {
    switch destination.locationType.id {
    case 1:
      return "airplane"
    case 2:
      return "bus"
    case 3:
      return "train.side.front.car"
    case 4:
      return "building.2"
    default:
      return "party.popper"
    }
  }
  
  var body: some View {
    HStack(alignment: .center, spacing: 4) {
      Text(destination.name)
        .font(inter15_500)
        .foregroundStyle(Theme.Color.black2)
        .lineLimit(1)
      Image(systemName: iconName)
        .resizable()
        .renderingMode(.template)
        .aspectRatio(contentMode: .fit)
        .padding(8)
        .frame(width: 32, height: 32)
        .background(Theme.Color.black6)
        .foregroundStyle(.white)
        .clipShape(.circle)
    }
    .frame(height: 32)
  }
}

@MainActor
class CustomMarker: GMSMarker {
  
  let destination: POILocation
  
  init(destination: POILocation) {
    self.destination = destination
    super.init()
    
    let swiftUIView = UIHostingController(rootView: CustumMarkerView(destination: destination)).view!
    swiftUIView.translatesAutoresizingMaskIntoConstraints = false
    swiftUIView.backgroundColor = .green
    //swiftUIView.heightAnchor.constraint(equalToConstant: 32).isActive = true
    self.iconView = swiftUIView
    self.appearAnimation = .fadeIn
    
    self.position = .init(
      latitude: Double(destination.coordinate.latitude) ?? 0,
      longitude: Double(destination.coordinate.longitude) ?? 0
    )
  }
}

If I don't add a height constraint it becomes like this:

If I add a height constraint it becomes like this:

Can anyone help me fix it?