Всем привет. Подскажите плз export const Default = () => {

const [values, setValues] = useState([20, 60]);
const onChange = useCallback((newValue: number) => {
const secondValue = values[1];
setValues([newValue, secondValue]);
}, [values]);
const onChange2 = useCallback((newValue: number) => {
const firstValue = values[0];
setValues([firstValue, newValue]);
}, [values]);
return (
<div style={{ margin: '10px', width: '400px' }}>
<DoubleSlider
values={values}
start={0}
end={100}
step={1}
onChange={onChange}
onChange2={onChange2}
/>
</div>
);
};
onChange внутри компонента DoubleSlider оборачивается в OnChangeLocal и OnChangeLocal2


const onChangeLocal = useCallback(
(event) => {
const newValue = Number((event.target as HTMLInputElement).value);
const minValue = Math.min(newValue, values[1]);
onChange(minValue, event);
},
[onChange, values],
);

const onChangeLocal2 = useCallback(
(event) => {
const newValue = Number((event.target as HTMLInputElement).value);
const maxValue = Math.max(newValue, values[0]);
onChange2(maxValue, event);
},
[onChange2, values],
);
Подскажите пожалуйста, как сделать, чтобы OnChange был один? пробрасывать вторым параметром индекс элемента массива который должен изменяться?

давай весь проект сюда

onChangeLocal прокидывается в input <input type="range" className={s.slider} min={start} max={end} step={step} onChange={onChangeLocal} value={values[0]} onMouseMove={setLeft} disabled={isDisabled} />