React-Number-Format pass value as float to validation

Question

I have a react-hook-form form and yup validation. What I'm trying to do is to format an input with react-number-format but also to pass float value to validation and to submit.

Here's the codesandbox: https://codesandbox.io/s/keen-field-26ub7

In InvoiceData.js there is an input that react-number-format is using. I would like to validate this input against the value above that (grossValue) but I think I cannot do this without parsing the value to float back again.

Answer 1

I think I've found an answer building on top of what Alexandre ELIOT did in the second solution. Instead of passing amountToPay to onSubmit function I've passed it to the NumberFormat itself.

<NumberFormat
        customInput={TextField}
        inputRef={register}
        variant="outlined"
        name="amountToPay"
        label={t('InvoiceData.amountToPay')}
        helperText={
          /* eslint-disable-next-line */
          amountToPay> invoice.amountGross
            ? 'cannot be greater that amount gross'
            : amountToPay=== 0
            ? 'cannot be 0'
            : null
        }
        error={amountToPay> invoice.amountGross || amountToPay=== 0}
        thousandSeparator={' '}
        suffix=" PLN"
        defaultValue={invoice.amountToPay}
        onValueChange={(value) => handleValueChange(value.floatValue)}
        decimalScale={2}
        fixedDecimalScale
      />