React setState from multiple input boxes

I'm working on a Recipe Box project and I have a program that allows the user to click a button which then displays input boxes that allows the user to add a new recipe to a list.

I have two inputs in the form. One for the name of the recipe being added, and one for the ingredients. The input for the name of the recipe works and allows the user to add a name, but the second input box is not updating the ingredients in state as it should.

Why isn't ingredientVal being updated in state? Why can't I enter text in the second input box?

import React, { Component } from 'react';
import RecipeList from './RecipeList';
import './App.css';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: ["Pumpkin Pie", "Spaghetti", "Onion Pie"],
      ingredients:[
        ["Pumpkin Puree", "Sweetened Condensed Milk", "Eggs", "Pumpkin Pie Spice", "Pie Crust"],
        ["Noodles", "Tomato Sauce", "(Optional) Meatballs"],
        ["Onion", "Pie Crust"]
      ],
      inputVal: '',
      ingredientVal: '',
      showRecipe: false
    };
  }

  // Get text user inputs for recipe
  handleChange = (event) => {
    this.setState({inputVal: event.target.value});
  };

  handleIngredientChange = (event) => {
    this.setState({ingredientVal: event.target.value});
  }

  // When user submits recipe this adds it
  onSubmit = (event) => {
    event.preventDefault()
    this.setState({
      inputVal: '',
      items: [...this.state.items, this.state.inputVal],
      ingredientVal: '',
      ingredients: [...this.state.ingredients, this.state.ingredientVal]
    });
  }

  onIngredientSubmit = (event) => {
    event.preventDefault()
    this.setState({
      ingredientVal: '',
      ingredients: [...this.state.ingredients, this.state.ingredientVal]
    });
  }

  // Shows recipe
  AddRecipe = (bool) => {
    this.setState({
      showRecipe: bool
    });
  }

  render() {
    return (
      <div className="App">
        <h3>Recipe List</h3>
        <RecipeList items={this.state.items} ingredients={this.state.ingredients} />
        <button onClick={this.AddRecipe}>Add New Recipe</button>


      { this.state.showRecipe ?
        <div>
          <form className="Recipe-List" onSubmit={this.onSubmit}>
            <div className="Recipe-Item">
              <label>Recipe Name</label>
              <input
                value={this.state.inputVal}
                onChange={this.handleChange} />
            </div>

            <div className="Recipe-Item">
              <label>Ingredients</label>
              <input
                value={this.state.ingredientVal}
                onChange={this.state.handleIngredientChange} />
            </div>
            <button>Submit</button>
          </form>
        </div>

        :null
      }
      </div>
    );
  }

}