React hook form two inputs with same register key

Have simple form with two almost identical inputs. One with range slider, another with input type number. Components from MUI library.

import Slider from "@mui/material/Slider";
import MuiInput from "@mui/material/Input";
import { useForm } from "react-hook-form";
//...

const { handleSubmit, register, control, } = useForm<{
    level: number;
}>({
    defaultValues: {
        level: 1,
    },
});

const [numberInput, setNumberInput] = useState<number>(5);

const handleNumberInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setNumberInput(e.target.valueAsNumber);
};

const handleSliderChange = (event: Event, value: number | number[], activeThumb: number) => {
    setNumberInput(value as number);
};


<Slider
    {...register("level")}
    valueLabelDisplay="auto"
    step={1}
    min={1}
    max={20}
    marks={gameComplexityLevels}
    value={numberInput}
    onChange={handleSliderChange}
/>
<MuiInput
    size="small"
    {...register("level")}
    onChange={handleNumberInputChange}
    inputProps={{
        step: 1,
        min: 0,
        value: numberInput,
        max: 20,
        type: "number",
        "aria-labelledby": "input-slider",
    }}
/>

User can change same value from Slider either MuiInput component. The problem is that react-hook-form does not allow keys with same name.

{...register("level")}

This line is duplicating. Also, the inputs does not work correctly. When I remove register line, everything works as expected. But with register line components work unstable. Does anyone know a solution for this?