Number(e.target.value) converts undefined to 0

Question

<TextFieldAdornedWithSelect
                    sx={{ width: 120 }}
                    size={"large"}
                    value={bottle.weight}
                    onChange={(e) => {
                      bottle.weight = Number(e.target.value);
                    
                    }}
                    type={"number"}
                    options={["g", "kg", "lbs"]}
                    adornmentprops={{
                      onChange: (e) => {
                        bottle.weightUnit = e.target.value;
                       
                      },
                      value: bottle.weightUnit,
                    }}
                  />

Inside the bottle class the weight property defined as:

# weight: number = 0;

When I hit backspace in TextFieldAdornedWithSelect, The 0 under weight isn’t disappearing when i type a number or hit backspace. I am expecting a placeholder if no value is there in TextFieldAdornedWithSelect, currently it's showing 0 if no value is there. Please, suggest any solution to this