Unable to use as a controlled component

[armujahid]

I am unable to use it as a controlled component using useState hook. Demo: https://codesandbox.io/s/nnqlnxozxj Code:

function App() {
  const [val, setVal] = useState(15);
  const handleChange = value => {
    setVal(20);
    console.log(val);
  };
  return (
    <div className="App">
      <NumericInput value={val} onChange={handleChange} />
    </div>
  );
}

Desired behavior: Its value should update from 15 to 20 and then should lock at 20 Current behavior: Value is updating from 15 to 20 just on first change. Its not locking to 20