Проблема с проверкой: невозможно проверить, если поля ввода имеют одинаковые элементы внутри

Question

Hello!Я использую response-form-validator для проверки входных данных.(сейчас мне нужно проверить, все ли входные номера разные)

Как я пытаюсь это сделать?В методе handleInput я добавляю входное значение в массив, а в моем новом правиле проверки ValidatorForm.addValidationRule проверяю, содержит ли массив число, только что введенное пользователем.

Проблема в том, что вводимый пользователем номер добавляется в массив до вызова ValidatorForm.addValidationRule, поэтому Validator выдает ошибку, даже если номер добавляется только один раз (поскольку он уже находится в массиве).

Вот как это выглядит:

Мой код:

const ValueArray = [];
let inputArr = ["user_number_1", "user_number_2", "user_number_3", "user_number_4", "user_number_5", "user_number_6"];

ValidatorForm.addValidationRule('isInputNotEqual', (value) => {

  if (ValueArray.includes(value)) {
      return false;
  }
  return true;
});

export default class InputArea extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      draw_number: '',
      user_number_1: '',
      user_number_2: '',
      user_number_3: '',
      user_number_4: '',
      user_number_5: '',
      user_number_6: '',
    }


  }


  submitHandler = () => {
    let { draw_number, ...rest } = this.state;
    let request = {
      numbers: Object.keys(rest).map(key => parseInt(rest[key])),
      draws: parseInt(draw_number)
    };
    this.props.onSubmit(request);
  }

  inputHandler = event => {
    let indexField = inputArr.indexOf(event.target.name);
    this.setState({[event.target.name]: event.target.value});
    ValueArray.splice(indexField, 1, event.target.value);
  };

  render() {
    console.log(ValueArray)
      return (
        <ValidatorForm ref="form" onSubmit={this.submitHandler} className="validator-form">
          <InputWrapper>

            {Object.entries(this.state).map(([key, value]) => {
              if (key.includes("user_number")) {
                return (
                  <NumberWrapper key={key}>
                    <Label>Number {key.replace(/\D*/, '')}</Label>
                    <TextValidator
                      name={key} 
                      type="number" 
                      maxLength="2" 
                      value={value} 
                      onChange={this.inputHandler} 
                      validators={['required', 'minNumber:1', 'maxNumber:52', 'isInputNotEqual']}
                      errorMessages={['This field is required', 'The number can not be negative or null', 'Please, write numbers from 1 to 52 only', 'All lottery numbers should be different']} 
                    />
                    <span className="focus-border">
                        <i></i>
                    </span>
                  </NumberWrapper>
                )
              }
            })}
            <NumberWrapper>
              <Label>Number of draws:</Label>
              <TextValidator 
                name="draw_number" 
                type="number" 
                value={this.state.draw_number} 
                onChange={this.inputHandler} 
                className="draw-number" 
                validators={['required', 'minNumber:1', 'maxNumber:99999', 'isInputNotEqual']}
                errorMessages={['This field is required', 'Number of draws can not be negative or null', 'You can play not more than 99.999 draws', 'test']}
              />
              <span className="focus-border">
                <i></i>
              </span>
            </NumberWrapper>

          </InputWrapper>
          <Button type="submit">Let's win!</Button>
        </ValidatorForm>
      )
  }
}

Что мне нужнопереписать (правило проверки или inputHandler), чтобы исправить эту проблему?

ОБНОВЛЕНИЕ:

Я переписал свое ValidatoeForm правило для следующего варианта:

ValidatorForm.addValidationRule('isInputNotEqual', (value) => {
  ValueArray.sort();
  console.log(ValueArray);
  for (let i = 0; i < ValueArray.length; i++) {
    if (ValueArray[i] === ValueArray[i + 1]) {
      return false;
    }
  }
  return true;
});

Но прямо сейчас, ValueArrayзаписывает только первое число из ввода (например, если я введу 14, он будет хранить 1 внутри).

Я думаю, что проблема в моем методе соединения: ValueArray.splice(indexField, 1, event.target.value);

Я добавил console.log, чтобы увидеть, какие значения содержат ValueArray: