Javascript – Editing a input type number with steps and displaying the value upto 2 decimal places

I have a react component similar to this:

export default function App() {
const [minVal, setMinVal] = useState(-19.0);
const [maxVal, setMaxVal] = useState(17.65);
const steps = 0.25;
const [val, setVal] = useState(0);

useEffect(() => {
 setMinVal(Number(minVal).toFixed(2));
 setMaxVal(Number(maxVal).toFixed(2));
 let avg = ((Number(minVal) + Number(maxVal)) / 2).toFixed(2);
 avg = Number(avg);
 setVal(avg);
}, [minVal, maxVal]);

const onMinValChange = (e) => {
  setMinVal(Number(e.target.value).toFixed(2));
};

const onMaxValChange = (e) => {
  setMaxVal(Number(e.target.value).toFixed(2));
};

return (
  <div className="App">
    <p> The min value is {minVal} </p>
    <p> The max value is {maxVal} </p>
    <p> The value is {val} </p>
    <label for="min">
      Min Value:
      <input
        type="number"
        min={minVal}
        max={maxVal}
        step={steps}
        value={minVal}
        id="min"
        onChange={onMinValChange}
      />
    </label>
    <label for="max">
      Max Value:
    <input
      type="number"
      min={minVal}
      max={maxVal}
      step={steps}
      value={maxVal}
      id="max"
      onChange={onMaxValChange}
    />
  </label>
</div>
)}

here I am unable to enter any desired value after the decimal using my keyboard. Please note that I can’t change the ‘step’ value here. I also need to display the value upto 2 decimal places.
You can check this codesandbox as well to see how it is working currently.