리액트 input에 range 값만 입력받기

type=number인 input태그에 min, max값을 주었지만,
더 큰 입력값을 줄 수 있다. 하지만 나는 min ~ max 값만 입력받을 수 있게 만들고 싶었다.
입력받은 값을 나머지 값으로 구해 값을 설정해주었다.

export const InputNumber= ({
    defaultVal = 1,
    setValue,
    maxValue,
    minValue,
}) => {
    const inputRef = useRef(null);
    const [filterValue, setFilterValue] = useState(defaultVal);

    const onChangeValue = (ref) => {
        if (ref.current.value % 10 == 1) {
            setFilterValue(1);
            setValue(1);
        } else if (ref.current.value % 10 == 2) {
            setFilterValue(2);
            setValue(2);
        } else if (ref.current.value % 10 == 3) {
            setFilterValue(3);
            setValue(3);
        } else if (ref.current.value % 10 == 4) {
            setFilterValue(4);
            setValue(4);
        } else if (ref.current.value % 10 == 5) {
            setFilterValue(5);
            setValue(5);
        }
    };


    return (
        <div>
            <div >
                <input
	                  id='test-input'
                    type='number'
                    min={minValue}
                    max={maxValue}
                    value={filterValue || 1}
                    ref={inputRef}
                    onChange={() => onChangeValue(inputRef)}
                /> 
            </div>
        </div>
    );
};

아래 코드로 리팩토링 해보았다. 실제도 작동하는지 테스트는 못해봤다...

export const InputNumber= ({
    defaultVal = 1,
    setValue,
    maxValue,
    minValue,
}) => {
    const inputRef = useRef(null);
    const [filterValue, setFilterValue] = useState(defaultVal);

    const onChangeValue = (ref) => {
        if (ref.current.value % 10 == ref.current.value) {
            setFilterValue(Number(ref.current.value));
            setValue(Number(ref.current.value));
        } 
    };


    return (
        <div>
            <div >
                <input
	                  id='test-input'
                    type='number'
                    min={minValue}
                    max={maxValue}
                    value={filterValue || 1}
                    ref={inputRef}
                    onChange={() => onChangeValue(inputRef)}
                /> 
            </div>
        </div>
    );
};