SwiftUI - Adding a clear button for number TextField

I tried added a clear button for TextField and it works.

When I click on the clear button the text is cleared.

Please see below for code sample:

struct TextFieldView: View {
    let label: String
    
    @Binding private var text: String
    
    @FocusState private var isFocused: Bool
    
    init(label: String, text: Binding<String>) {
        self.label = label
        self._text = text
    }
    
    var body: some View {
        HStack {
            Text(label.nsLocalizedString)
            Spacer()
            TextField("", text: $text)
                .foregroundColor(.blue)
                .multilineTextAlignment(.trailing)
                .focused($isFocused)
            if !text.isEmpty && isFocused {
                Image(systemName: "x.circle")
                    .foregroundColor(.secondary)
                    .padding(.leading, 8)
                    .onTapGesture {
                        text = ""
                    }
            }
        }
    }
}

struct TextFieldView_Previews: PreviewProvider {
    static var previews: some View {
        Form {
            TextFieldView(label: NSLocalizedStringProvider.Name, text: .constant("Cash"))
            TextFieldView(label: NSLocalizedStringProvider.Name, text: .constant(""))
        }
        .preferredColorScheme(.dark)
    }
}

However, when I tried to do the same with a number field it doesn't work.

Please see below code sample:

struct NumberFieldView: View {
    let label: String
    
    @Binding private var number: Double?
    
    @FocusState private var isFocused: Bool
    
    init(label: String, number: Binding<Double?>) {
        self.label = label
        self._number = number
    }
    
    var body: some View {
        HStack {
            Text(label.nsLocalizedString)
            Spacer()
            TextField("", value: $number, format: .number)
                .foregroundColor(.blue)
                .multilineTextAlignment(.trailing)
                .focused($isFocused)
                .keyboardType(.decimalPad)
            if number != nil && isFocused {
                Image(systemName: "x.circle")
                    .foregroundColor(.secondary)
                    .padding(.leading, 8)
                    .onTapGesture {
                        isFocused = false
                        number = nil
                    }
            }
            Text(number ?? 0,format: .number)
        }
    }
}

struct NumberFieldView_Previews: PreviewProvider {
    static var previews: some View {
        Form {
            NumberFieldView(label: NSLocalizedStringProvider.Balance, number: .constant(nil))
        }
    }
}

When the x button is clicked the number is sometimes not cleared nor changed.

Why is this happening?

What am I missing or doing wrong?

And how do I make it work?

Edit ---

Added videos showcasing that the focused method doesn't work sometimes

The blue words are the number

The white words are the formatted string

Sometimes only number is cleared and not the formatted string