Не могу понять почему не выводятся данные из массива

import React from "react";
import './App.scss';
import Header from "./components/Header/Header";
import Item from "./components/Item/Item";
import AddItem from "./components/AddItem/AddItem";

const arr = [
    {
        name: 'Семена томатов',
        price: 20,
        amount: 5,
        id: 1,
    },
    {
        name: "Семена огурцов",
        price: 25,
        amount: 20,
        id: 2,
    },
    {
        name: "Семена клубники",
        price: 50,
        amount: 11,
        id: 3,
    },
    {
        name: "Семена петрушки",
        price: 5,
        amount: 67,
        id: 4,
    },
];

function App() {


    /* const addItem = (Name, Price, Amount) => {
            setSeeds([
                {
                Name: Name,
                Price: Price,
                Amount: Amount
                },
                ...arr,
            ])
        }; */  //Почему-то добавляет только один объект в массив, потом перезаписывает его

    const [seeds, setSeeds] = React.useState(arr);

    const addItem = (name, price, amount) => {
        const arr1 =
            {
                name,
                price,
                amount,
                id: new Date()
            }
        setSeeds(arr.unshift(arr1))
        console.log(seeds)
    }
    const deleteItem = (id) => {
        /* setSeeds((prev) => prev.filter(item => item.id !== id)) */
        console.log(id);
    }
    console.log(seeds.name);

    return (
        <div className="wrapper">
            <Header/>
            <div className="container">
                <div className="topCon">
                    <h2>Каталог</h2>
                    <div className="topConRight">
                        <input placeholder="поиск..."/>
                    </div>
                </div>
                <div className="Catalog">
                    <div className="titles">
                        <table>
                            <tbody>
                            <tr className="tableNames">
                                <th>Название</th>
                                <th>Цена</th>
                                <th>Количество</th>
                                <th>Редактирование</th>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <AddItem addItem={addItem}/>
                    <div className="items">
                        {arr.map((obj, index) => (
                            <Item key={index}
                                  Name={obj.name}
                                  Price={obj.price}
                                  Amount={obj.amount}
                                  seeds={seeds}
                                  deleteItem={deleteItem}
                            />
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
}

export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>