react-number-format: Setting Default Value

Question

I have the following:

<NumberFormat  allowNegative={false} label="Serves" customInput={TextField} variant="outlined" name="serves" value={serves} thousandSeparator={true} decimalScale={0} fixedDecimalScale={true} onChange={e => setServes(e.currentTarget.value)} />

What I am trying to to is set defaultValue to 1 - this is used when adding an item in React - the field is blank by default and setting defaultValue="1" does not work when the value is also present - I need the value to save into Firebase.

Any suggestions?

Answer 1

const [serves, setServes] = React.useState(1);