How to update the input value when catching an onChange event in React?

I am having problems with the total number of items in the CartHeader component. Obviously I have added the quantity of each product but the result is not as I expected ?. Can someone find the fault for me? I sincerely thank.

import CartHeader from "./CartHeader";
import CartBody from "./CartBody";
import CartFooter from "./CartFooter";
import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [
        {
          id: 1,
          name: "Apple Watch Series 5",
          description: "Description for Apple Watch Series 5",
          img:
            "https://bachlongmobile.com/media/catalog/product/cache/2/image/040ec09b1e35df139433887a97daa66f/2/0/2076130625_1_1_1.jpg",
          price: 499.99,
          quantity: 1
        },
        {
          id: 2,
          name: "iPhone 11 Pro Max",
          description: "Description for iPhone 11 Pro Max",
          img:
            "https://cdn.fptshop.com.vn/Uploads/Originals/2019/9/11/637037687763926758_11-pro-max-xanh.png",
          price: 1099.99,
          quantity: 1
        },
        {
          id: 3,
          name: "Macbook Pro 16 inch",
          description: "Description for Macbook Pro 16 inch",
          img: "https://shopdunk.com/wp-content/uploads/2019/11/mac16inch.jpg",
          price: 2399.99,
          quantity: 1
        },
        {
          id: 4,
          name: "iPad Pro 12.9 inch",
          description: "Description for iPad Pro",
          img:
            "https://cdn.fptshop.com.vn/Uploads/Originals/2019/1/11/636828015979564724_ipad-pro-12-9-xam-1.png",
          price: 999.99,
          quantity: 1
        },
        {
          id: 5,
          name: "AirPods Pro",
          description: "Description for AirPods Pro",
          img:
            "https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/MWP22?wid=1144&hei=1144&fmt=jpeg&qlt=80&op_usm=0.5,0.5&.v=1572990352299",
          price: 249.99,
          quantity: 1
        }
      ]
    };
  }

  onRemoveProduct = id => {
    const newProducts = this.state.products;
    // Tìm vị trí sản phẩm cần xoá
    let index = newProducts.findIndex(product => product.id === id);
    // Kiểm tra nếu tìm thấy thì mới xoá
    if (index !== -1) {
      newProducts.splice(index, 1);
      this.setState({
        products: newProducts
      });
    }
  };

  handleChange = (e, id) => {
    const { products } = this.state;
    const indexProduct = products.findIndex(product => product.id === id);
    products[indexProduct].quantity = e.target.value;
    this.setState({ products });
  };

  render() {
    const products = this.state.products;
    let numberItems = 0;
    let subTotal = 0;
    products.map(product => {
      numberItems += product.quantity;
      subTotal += product.price * product.quantity;
    });

    return (
      <main>
        <CartHeader numberItems={numberItems} />
        <CartBody
          products={products}
          onRemoveProduct={this.onRemoveProduct}
          handleChange={this.handleChange}
        />
        <CartFooter subTotal={subTotal} />
      </main>
    );
  }
}

export default App;

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

have I ever misunderstood the problem. Link codesandbox: https://codesandbox.io/s/thirsty-hill-6w2ex

The problem is that you are using the + with strings. So when you calculate the total number, you get strange results:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const result = '1' + '1' + '2'
console.log(result) // '112'

<!-- end snippet -->

Change the render method to:

products.map(product => {
  numberItems += Number(product.quantity);
  console.log(numberItems);
  subTotal += Number(product.price) * Number(product.quantity);
});

  handleChange = (e, id) => {
    const { products } = this.state;
    const indexProduct = products.findIndex(product => product.id === id);
    products[indexProduct].quantity = Number(e.target.value);
    this.setState({ products });
  };

https://codesandbox.io/s/loving-hertz-vfpjw

you need to return value inside map loop

    products.map(product => {
      numberItems += product.quantity;
      subTotal += product.price * product.quantity;
      return { numberItems, subTotal  }
    });