React.js Error getting array with LocalStorage

После добавления "рецепта", в localStorage добавляется "объект", а не "массив", и после добавления следующих рецептов, объект в localStorage обновляется, а должно быть "массивом" и копиться, что стоит переделать?

App.jsx:

import { useState } from 'react'
import './App.css'
import { AddRecipe } from './AddRecipe'
import { RecipeList } from './RecipeList'

function App() {
const [recipes, setRecipes] = useState(localStorage.getItem('recipes') ? JSON.parse(localStorage.getItem('recipes')) : []);

const setRecipesWithSave = (newRecipes) => {
setRecipes(newRecipes);
localStorage.setItem('recipes', JSON.stringify(newRecipes))
}

const addRecipe = (recipe) => {
setRecipesWithSave([...recipes, recipe])
}

const removeRecipe = (recipeId) => {
setRecipesWithSave(recipes => recipes.filter(item => item.id !== recipeId))
}

return (
<>
<AddRecipe addRecipe={addRecipe}/>
<RecipeList recipes={recipes} removeRecipe={removeRecipe}/>
</>
)
}

export default App

JS

import { useState } from 'react'

import './App.css'

import { AddRecipe } from './AddRecipe'

import { RecipeList } from './RecipeList'



function App() {

  const [recipes, setRecipes] = useState(localStorage.getItem('recipes') ? JSON.parse(localStorage.getItem('recipes')) : []);



  const setRecipesWithSave = (newRecipes) => {

    setRecipes(newRecipes);

    localStorage.setItem('recipes', JSON.stringify(newRecipes))

}



  const addRecipe = (recipe) => {

    setRecipesWithSave([...recipes, recipe])

  }



  const removeRecipe = (recipeId) => {

    setRecipesWithSave(recipes => recipes.filter(item => item.id !== recipeId))

  }



  return (

    <>

      <AddRecipe addRecipe={addRecipe}/>

      <RecipeList recipes={recipes} removeRecipe={removeRecipe}/>

    </>

  )

}



export default App

RecipeList.jsx:

import { RecipeItem } from "./RecipeItem"
import './RecipeList.css'

export const RecipeList = ({ recipes, removeRecipe }) => {
return (
<div>
<h2>Список добавленных рецептов</h2>
<ul className="recipeList">
{recipes.map(recipeItem => (
<RecipeItem key={recipeItem.id} recipeItem={recipeItem} removeRecipe={removeRecipe}/>
))}
</ul>
</div>
)
}

JS

import { RecipeItem } from "./RecipeItem"

import './RecipeList.css'



export const RecipeList = ({ recipes, removeRecipe }) => {

    return (

        <div>

            <h2>Список добавленных рецептов</h2>

            <ul className="recipeList">

                {recipes.map(recipeItem => (

                    <RecipeItem key={recipeItem.id} recipeItem={recipeItem} removeRecipe={removeRecipe}/>

                ))}

            </ul>

        </div>

    )

}

Результат после добавления рецепта: