Handle real `change` event in React

In javascript input has change event that in case of type="number" occures when either the input looses its focus or user uses step up or step down functionality, but not on the normal typing.

document.querySelector("input").addEventListener("change", e => {
  console.log(e.type, e.target.value)
})
<input type="number" step="0.1"> <button>&nbsp;</button>

But when I’m using react, it replaces change event by input event which occurs on typing too:

function App() {
  const [val, setVal] = React.useState("")
  
  function onChange(e) {
    console.log(e.type, e.nativeEvent.type, e.target.value)
    setVal(e.target.value)
  }
  
  return (
    <React.Fragment>
     <input type="number" step="0.1" value={val} onChange={onChange} />
     {" "}
     <button>&nbsp;</button>
    </React.Fragment>
  )
}

ReactDOM.render(<App />, document.querySelector("main"))
<script crossorigin src="//unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="//unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<main></main>

I need to handle normal change event that does not occur on typing.
How can I do that in react?

PS: Button in the snippects is a place where you can tab to from the input.