To efficiently implement the array update events in React

App.js

import React, { Component } from "react";
import "./style.css";

export default class App extends Component {
  state = {
    cart: ["Corn", "Potato"],
  };

  addNewItem = () => {
    this.setState((prevState) => ({
      cart: [...prevState.cart, this.inputElement.value],
    }));
  };

  render() {
    return (
      <div>
        <input type="text" ref={(el) => (this.inputElement = el)} />
        <button onClick={this.addNewItem}> Add Item </button>
        <ol>
          {this.state.cart.map((subItems, sIndex) => {
            return <li key={subItems + sIndex}> {subItems}</li>;
          })}
        </ol>
      </div>
    );
  }
}