How do I Remove Text Over a Placeholder

Hey everyone, I'm relatively new to SwiftUI, so this might be a simple solution. I’m working on a dilution calculator and it works with no issues. However, there is always a “0” over the placeholder in the textfield for Container Size and Dilution Ratio. I don't mind the "0", I actually want a "0" there. But I have to erase it every time I tap on the textfield to input a number. Even if I remove the placeholder it's still there. How do I make it so that I don't have to keep erasing the "0" every time I want to input a number but keep the placeholder. Thanks.

Example: [https://i.makeagif.com/media/10-05-2022/-d_E8J.gif)


struct CalculatorView: View {

    @State private var containerSize = 0
    @State private var dilutionRatio = 0
    @State private var totalProduct = 0.0
    @State private var totalWater = 0.0

    @FocusState private var amountIsFocused: Bool    

    @FocusState private var focusedInput: Field?    

    func totalProductAmount() -> Double {

        let firstValue = Double(containerSize)
        let secondValue = Double(dilutionRatio + 1)

        let totalProduct = Double(firstValue / secondValue)

    return totalProduct
    }

    func totalWaterAmount() -> Double {

        let firstValue = Double(containerSize)
        let secondValue = Double(dilutionRatio + 1)

        let totalProduct = Double(firstValue / secondValue)
        let totalWater = Double(firstValue - totalProduct)

    return totalWater
    }   

    var body: some View {
        NavigationView {
        VStack(alignment: .center) {
            Image("Logo")
                .padding(.horizontal, 30)            

            HStack {

 //Container Size

                ZStack {
                    Image("Container Size (Oz)")
                        .padding(.vertical, -15)
                    TextField("", value: $containerSize, format: .number)
                        .frame(width: 200.0, height: 60.0)
                        .multilineTextAlignment(.center)
                        .font(Font.system(size: 50, design: .default))
                        .foregroundColor(.white)
                        .keyboardType(.decimalPad)
                        .focused($amountIsFocused)
                        .focused($focusedInput, equals: .containerSize)

                }

            }

//Dilution Ratio

            ZStack {
                Image("Dilution Ratio - 2")
                    .padding(.vertical, -10)
                TextField("", value: $dilutionRatio, format: .number)
                    .frame(width: 200.0, height: 60.0)
                    .multilineTextAlignment(.center)
                    .font(Font.system(size: 50, design: .default))
                    .foregroundColor(.white)
                    .keyboardType(.decimalPad)
                    .focused($amountIsFocused)
                    .focused($focusedInput, equals: .dilutionRatio)

            }

//Go Button

            Button(action: {
                totalProduct = totalProductAmount()
                totalWater = totalWaterAmount()
                amountIsFocused = false

            }, label: {
                Image("Go Button")

            })

//Results

            HStack{           
                ZStack {
                    Image("Total Product (Oz)")
                    Text("\(totalProduct, specifier: "%.1f")")
                        .font(Font.system(size: 60, design: .default))
                        .foregroundColor(.white)

                }                

                ZStack {

                    Image("Total Water (Oz)")
                    Text("\(totalWater, specifier: "%.1f")")
                        .font(Font.system(size: 60, design: .default))
                        .foregroundColor(.white)

                }

 ```
How do I Remove Text Over a Placeholder
 
 
Q