why the dispatchEvent does not work in React

I want to create a list of product and user can input the value of quantity in a input element. The elementLitsener which is binded on the input works well, it can change the data which is stored in App.js acoordingly. I want set the quantity to ‘0’ by click the reset button, i tried to use dispatchEvent to trigger the change event binded on input element, but it does not work.
Why it behaves like this?

import React, { Component } from 'react'
import "bootstrap/dist/css/bootstrap.min.css";

import './index.css'
export default class Item extends Component {
  constructor(props){
    super(props);
    this.state={
        quantity:0
    }
    this.subtotalRef = React.createRef()
    this.quantityRef = React.createRef()
  }

  //change the quantity 
  handleQuantity=(id)=>{
    return ()=>{
      console.log(11);
      const quantity = this.quantityRef.current.value;
      this.subtotalRef.current.innerHTML = parseFloat(this.props.price*quantity).toFixed(2);
      this.props.changeQuantity(quantity,id);
    }
      
  }

  //reset the quantity
  handleReset=()=>{
    this.quantityRef.current.value = 0;
    // this.handleQuantity(this.props.id)();
    this.quantityRef.current.dispatchEvent(new Event("change",{bubbles:true}))
  }

  render() {
    const {id,quantity,name,price,index} = this.props
    return (
      <tr>
      <th scope="row">{index}</th>
      <td>{name}</td>
      <td>{price}</td>
      <td><input type="number" min="0" step="1" onChange={this.handleQuantity(id)} ref={this.quantityRef} value={quantity}/></td>
      <td ref={this.subtotalRef}>$ 0.00</td>
      <td>
        <button type="button" className="btn btn-warning" onClick={this.handleReset}>reset</button>
        <button type="button" className="btn btn-danger">delete</button>
      </td>
    </tr>    )
  }
}