react-number-format MUI ReactHookForms issues

Question

I have the following code that is not responding to error conditions from my form validation (I've set error manually in the code with helper text to ensure there's no issues from the controller.

<TableCell className={classes.pricingDrawerCell}>
  <Controller
    name={`pricing.${idx}.leadTimeDays`}
    control={methods.control}
    render={({
      field: { onChange, onBlur, value, ref },
      fieldState: { error },
    }) => {
      return (
        <NumberFormat
          value={value}
          className={classes.tableCellStyle}
          type="text"
          label=""
          customInput={TextField}
          fullWidth
          required
          onValueChange={e => {
            onChange(e.value);
          }}
          onBlur={onBlur}
          helperText="HELP"
          error
          inputRef={ref}
          size="medium"
        />
      );
    }}
  />
</TableCell>

  pricingDrawerCell: {
    padding: '0 16px',
  },
  tableCellStyle: {
    margin: 0,
    padding: 0,
    flexDirection: 'row' as any,
    '& .MuiOutlinedInput-input': {
      padding: 5,
      margin: 0,
    },
    '& .MuiFormControl-marginNormal': {
      margin: 0,
    },
    '& .MuiTableCell-root': {
      paddingTop: '5px',
      paddingBottom: '5px',
    },
    '& .MuiOutlinedInput-notchedOutline': {
      border: 'none',
    },
  },

I'm using react-number-formatter @4.9.3 and MUI v4.

What I expect to happen is to find see (given that I've hardcoded an error and error message an input with the error and helper text, which I'm not seeing (frankly the underlying input element has an aria-invalid of false when error is true, which is just plain incorrect.