[Dúvida] Cannot convert value of type 'Environment<UserInterfaceSizeClass?>' to expected argument type 'UserInterfaceSizeClass'

O curso está bem desatualizado, e acredito que por isso estou recebendo um erro quando tento utilizar o operador ternário para validar a tela Na linha 14 do código abaixo, estou recebendo o seguinte erro: Cannot convert value of type 'Environment<UserInterfaceSizeClass?>' to expected argument type 'UserInterfaceSizeClass'

import SwiftUI

struct HeaderView: View {
    @Environment(\.horizontalSizeClass) var horizontalSizeClass

    var body: some View {
        GeometryReader { view in
            VStack {
                VStack {
                    // MARK: Header VStack

                    Text("alura viagens")
                        .foregroundStyle(.white)
                        .font(.custom("Avenir Black", size: self.horizontalSizeClass == .compact ? 20 : 50))
                        .padding(.top, 10)
                    Text("ESPECIAL")
                        .foregroundStyle(.white)
                        .font(.custom("Avenir Book", size: 20))
                        .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
                        .padding(.leading, 30)
                    Text("BRASIL")
                        .foregroundStyle(.white)
                        .font(.custom("Avenir Black", size: 23))
                        .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
                        .padding(.leading, 30)
                }
                .frame(width: view.size.width, height: 180, alignment: .top)
                .background(.purple)

                HStack {
                    Button(action: { }, label: {
                        Text("Hotéis")
                            .font(.custom("Avenir Medium", size: 17))
                            .foregroundStyle(.white)
                    })
                    .frame(width: 100, height: 50)
                    .overlay(RoundedRectangle(cornerRadius: 10)
                        .stroke(.blue, lineWidth: 10))
                    .background(.blue)
                    .offset(x: 50)

                    Spacer()

                    Button(action: { }, label: {
                        Text("Pacotes")
                            .font(.custom("Avenir Medium", size: 17))
                            .foregroundStyle(.white)
                    })
                    .frame(width: 100, height: 50)
                    .overlay(RoundedRectangle(cornerRadius: 10).stroke(.orange, lineWidth: 10))
                    .background(.orange)
                    .offset(x: -50)
                }
                .offset(y: -35)
            }
        }
    }
}

#Preview(traits: .fixedLayout(width: 400, height: 250)) {
    HeaderView()
}

Fora isso, o layout está ficando bem diferente, mesmo fazendo exatamente o mesmo código. Seria legal uma versão atualizada do curso.