Массив в React превращается в единицу

есть форма, в которой два инпута, при изменении каждого из которых меняется state компонента (recipeName, recipeIngredients). Дальше есть кнопка Добавить, которая создаёт объект

let recipe = {
  name: this.state.recipeName,
  ingredients: this.state.recipeIngredients.split(',')
}

и добавляет его в массив рецептов

addRecipe(e) {
        if (this.state.recipeName.length > 0 && this.state.recipeIngredients.length > 0) {
            let recipe = {
                name: this.state.recipeName,
                ingredients: this.state.recipeIngredients
            }
            this.setState({
                recipes: this.state.recipes.push(recipe)
            })
            this.handleClose(); //закрытие модального окна, в котором всё происходит
        } else {
            alert('Fill all inputs!')
        } 
    }

пытаюсь вывести содержимое массива

<ul>
  {this.state.recipes.map(item => <li>item.name</li>)}
</ul>

и на этом этапе массив recipes почему-то равен 1 и выводит ошибку TypeError: this.state.recipes.map is not a function