TypeError: Cannot set property 'name' of undefined on "onChange" event using React-Sortable-hoc

 
 const [inputList, setInputList] = useState([{ name: "", quantity: "" }]);
 
 // handle input change
  const handleInputChange = (e, index) => {
    const { name, value } = e.target;
    const list = [...inputList];
    list[index][name] = value;
    setInputList(list);
  };
  
   const shoppingList = inputList.map((element, i) => {
      <div className="form" key={i}>
        
        <input
          className="form-field item-form-field"
          name="name"
          placeholder="Name"
          value={element.name}
        />
        <input
          className="form-field item-form-field"
          type="number"
          name="quantity"
          placeholder="Amount"
          // className="ml10"
          min="1"
          max="12"
          value={element.quantity}
        ></input>
        {inputList.length !== 1 && (
          <button className="remove-btn remove-btn-3 remove-btn-sep"> Remove</button>
        )}
      </div>
  })

  const SortableItem = SortableElement(({value, index}) => (
    
    <div className="form">
      <DragHandle />
    <input
      className="form-field item-form-field"
      name="name"
      placeholder="Name"
      value={value.name}
      onChange={(e) => handleInputChange(e, index)}
      
    />
    <input
      className="form-field item-form-field"
      type="number"
      name="quantity"
      placeholder="Amount"
      min="1"
      max="12"
      value={value.quantity}
      onChange={(e) => handleInputChange(e, index)}
    ></input>
    {inputList.length !== 1 && (
      <button className="remove-btn remove-btn-3 remove-btn-sep"
        onClick={() => handleRemoveClick(index)}
      >
      Remove
      </button>
    )}
  </div>