Trying to move a range input with javascript in react [duplicate]

I have a range input with a react component, it’s only moving the slider. not triggering the callback function that’s there onChange

const volumeResetHandler = async () => {
  document.querySelector('input[type=range]').value = 0;
}

<input
 className="slider_input"
 type="range"
 value={slv}
 min="0"
 max="600"
 step="10"
 autoFocus
 onChange={volumeChangeHandler}
/>
<h3 onClick={volumeResetHandler} className="cursor-pointer">Reset to default</h3>

I was expecting volumeChangeHandler would get triggered on document.querySelector('input[type=range]').value = 0; but it doesn’t

All soutions mentioned here suffers from same issue