Swiftui Picker with optional value selected in picker

First the model:

import SwiftData
//Model one: type of contract, i.e. Firm Fixed Price, etc
@Model
final class TypeOfContract {
    var contracts: [Contract]
    @Attribute(.unique) var typeName: String
    @Attribute(.unique) var typeCode: String
    var typeDescription: String
    
    init(contracts: [Contract], typeName: String = "", typeCode: String = "", typeDescription: String = "") {
        self.contracts = contracts
        self.typeName = typeName
        self.typeCode = typeCode
        self.typeDescription = typeDescription
    }
}
//Model two: the Contract
@Model
final class Contract {
    var contractType: TypeOfContract?
    var costReports: [CostReport]
    @Attribute(.unique) var contractNumber: String
    @Attribute(.unique) var contractName: String
    var startDate: Date
    var endDate: Date
    var contractValue: Decimal
    var contractCompany: String
    var contractContact: String
    var contactEmail: String
    var contactPhone: String
    var contractNotes: String
    init(contractType: TypeOfContract?, costReports: [CostReport], contractNumber: String = "", contractName: String = "", startDate: Date = .now, endDate: Date = .now, contractValue: Decimal = 0.00, contractCompany: String = "", contractContact: String = "", contactEmail: String = "", contactPhone: String = "", contractNotes: String = "") {
        self.contractType = contractType
        self.costReports = costReports
        self.contractNumber = contractNumber
        self.contractName = contractName
        self.startDate = startDate
        self.endDate = endDate
        self.contractValue = contractValue
        self.contractCompany = contractCompany
        self.contractContact = contractContact
        self.contactEmail = contactEmail
        self.contactPhone = contactPhone
        self.contractNotes = contractNotes
    }
}
//Model Three: The Cost Reports
@Model
final class CostReport {
    var contract: Contract?
    var periodStartDate: Date
    var periodEndDate: Date
    var bCWP: Double //Budgeted Cost Work Performed
    var aCWP: Double //Actual Cost Work Performed
    var bCWS: Double //Budgeted Cost Work Scheduled
    //Calculated fields
    
    init(contract: Contract?, periodStartDate: Date = .now, periodEndDate: Date = .now, bCWP: Double = 0.0, aCWP: Double = 0.0, bCWS: Double = 0.0) {
        self.contract = contract
        self.periodStartDate = periodStartDate
        self.periodEndDate = periodEndDate
        self.bCWP = bCWP
        self.aCWP = aCWP
        self.bCWS = bCWS
        
    }
}

Now the code for the Picker
```import SwiftUI
import SwiftData
struct EnterNewContract: View {
    @Environment(\.modelContext) var modelContext
    @Query(sort: \TypeOfContract.typeName) private var typeOfContracts: [TypeOfContract]
    @Query private var contracts: [Contract]
    @State private var costReports: [CostReport] = []
    @State private var contractType: [TypeOfContract]?
    @State private var contractNumber: String = ""
    @State private var contractName: String = ""
    @State private var startDate: Date = Date()
    @State private var endDate: Date = Date()
    @State private var contractValue: Decimal = 0
    @State private var contractCompany: String = ""
    @State private var contractContact: String = ""
    @State private var contactEmail: String = ""
    @State private var contactPhone: String = ""
    @State private var contractNotes: String = ""
    var body: some View {
        Form {
            VStack {
            Section(header: Text("Enter New Contract")
                .foregroundStyle(.green)
                .font(.headline)){
                    Picker("Select a type of contract", selection: $contractType) {Text("Select type").tag(nil as TypeOfContract?)
                        ForEach(typeOfContracts, id: \.self) { typeOfContracts in
                            Text(typeOfContracts.typeName) .tag(typeOfContracts as TypeOfContract?)
                        }
                    }
                TextField("Contract Number", text: $contractNumber)
                    .frame(width: 800, height: 40)
                TextField("Contract Name", text: $contractName)
                    .frame(width: 800, height: 40)
                DatePicker("Contract Start Date", selection: $startDate, displayedComponents: [.date])
                    DatePicker("Contract End Date", selection: $endDate, displayedComponents: [.date])
                    
                }
            }
        }
    }
}

The code works, for the most part. The selection I make from the list does not appear. Instead there is just a shaded empty box . Also, I need to select my selection choice twice before the check mark to appear. To see the choices and my selection I must click on the empty shaded box.

What did I do wrong