React Js ..updating state but array length not changing immediately

Question

Im trying to update the number of recipes,

  constructor(){
    super();
    this.state={
      recipes : [{recipeName:'Masala',ingredients:['garam masala','onions']},
                {recipeName:'Tomato soup',ingredients:['tomatos','onions']}
              ],
      addRecipeModalShow : false,
      editRecipeModalShow : false,
      editIndexValue:0,
      recipeCount:0,
      newRecipes:{recipeName:'',ingredients:[]}
    };
  }

but when creating new recipe and pushing to the array the count doesnt change even though the new recipe is created

componentDidMount = () =>{
    this.updateRecipeCount();
  }

  updateRecipeCount = () => {
    let count = this.state.recipes.length;
    this.setState({
      recipeCount:count
    });

  }

here is the function to create new recipe

  saveNewRecipe  = (newRecipe) =>{
    let recipes = this.state.recipes.slice();
      console.log(this.state.recipes);
    recipes.push(newRecipe);
      console.log(this.state.recipes.length);
    this.setState({
        recipes:recipes,
        newRecipes:{recipeName:"", ingredients:[]}
    });
    this.updateRecipeCount();
        console.log(this.state.recipes);
        console.log(this.state.newRecipes);
       this.hideModal();

  }

thanks