React.js Ошибка в получении массива с 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

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>
    )
}

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