How to move a range slider by changing input field?

Question

I have two input fields and range slider that should be linked but when typing integer number into input field the slider doesn't move, from other side when moves slider the value of input field is updated. Using MUI range slider and MUI slider with input field

This example shows how slider should work. But my solution on React doesn't work properly.

const RangeSlider = () => {
  const { control } = useForm({});

  const handleNumberInputChange = (e) => {
    console.log(e.target);
    setNumberInput(e.target.valueAsNumber);
    setValue("level", e.target.valueAsNumber);
  };
  
  const handleSliderChange = (event, value, activeThumb) => {
    setNumberInput(value);
    setValue("level", value);
  };

return (
  <ContainerCss>
    <Controller
      control={control}
      name="slider-range"
      defaultValue={[20, 50]} <- values should update by input fields
      render={({ field: { value, ...fields } }) => {
       console.log(value);
        return (
         <>
          <Slider
            {...fields}
            max={100}
            min={0}
            step={1}
            value={value}
          />
          <Input
            {...fields}
            value={value[0]}
            size="small"
            name="input-left-range"
          />
          <Input
            {...fields}
            value={value[1]}
            size="small"
            name="input-right-range"
          />
        </>
      );
    }}
  />
</ContainerCss>);
};

I'm expecting that the typing integer into 'input-left-range' input field the left slider will move and when typing integer into 'input-right-range' input field the right slider will move. As a demonstrated in example link above.