Как установить ручку в nouislider-react?

У меня проблемы с настройкой дескриптора noUiSlider. Это то, что у меня есть на данный момент.

const SearchOptionRange: React.FC<SearchOptionRangeProps> = props => {

  const [lowValue, setLowValue] = useState(props.start);
  const [highValue, setHighValue] = useState(props.end);

  const handleLow = (event: any) => {
    setLowValue(event.target.value);
  }

  const handleHigh = (event: any) => {
    setHighValue(event.target.value);

  }

  const updateValues = (value: any) => {
    setLowValue(Number(value[0]));
    setHighValue(Number(value[1]));
  };

  return (
        <div className={props.name}>
          <div className="option-name">{props.name}</div>
          <Nouislider
            start={[props.start, props.end]}
            connect={true}
            range={{
              min: props.start,
              max: props.end
            }}
            step={props.step}
            onUpdate={ (value) => updateValues(value) }
          />
          <div className="inputs">
            <input type="text" value={lowValue} onChange={ (event) => handleLow(event)}></input>
            <input type="text" value={highValue} onChange={ (event) => handleHigh(event)}></input>
          </div>
        </div>
  );
};

И мой компонент называется так.

<SearchOptionRange name="price" start={300} end={25000} step={50}></SearchOptionRange>

Цель состоит в том, чтобы обновить ползунок, когда я ввожу значения во входные данные. Работает наоборот (перетаскивание ползунка обновляет входные значения).

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

Я просто не могу понять, как я могу обновить ползунок при вводе ввода. Кто-нибудь может мне помочь?