Моментально исчезают данные из массива после добавления их на страничку

import React from "react";


export default function ({addItem}) {

    const [Name, setName] = React.useState('');
    const [Price, setPrice] = React.useState('');
    const [Amount, setAmount] = React.useState('');

    return (
        <form className="addItem">
                        <span>
                            <input type="text"
                                   onChange={event => setName(event.target.value)}
                                   value={Name}
                                   placeholder="Введите название"/>
                        </span>
                        <span>
                            <input type="text"
                                   onChange={event => setPrice(event.target.value)}
                                   value={Price}
                                   placeholder="Введите Цену"/>
                        </span>
                        <span>
                            <input type="text"
                                   onChange={event => setAmount(event.target.value)}
                                   value={Amount}
                                   placeholder="Введите Количество"/>
                        </span>
            <span><button className="button" onClick={() => addItem(Name,Price,Amount)}>Добавить</button></span>
        </form>
    )
}

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

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 [seeds, setSeeds] = React.useState(arr);

    /* React.useEffect(() => {
        fetch('https://62345c98debd056201e31e79.mockapi.io/Seeds').then((res) => {
            return res.json();
        }).then(json => {
            setSemena(json);
        });
    }, []); */

    const addItem = (Name, Price, Amount) => {
        setSeeds([
            {
            Name: Name,
            Price: Price,
            Amount: Amount,
            id: new Date()
            },
            ...arr,
        ])
    };

    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>
                            <tr className="tableNames">
                                <th>Название</th>
                                <th>Цена</th>
                                <th>Количество</th>
                                <th>Редактирование</th>
                            </tr>
                        </table>
                    </div>
                    <AddItem addItem={addItem}/>
                    <div className="items">
                        {seeds.map((obj, index) => (
                            <Item key={seeds.id}
                                  Name={obj.Name}
                                  Price={obj.Price}
                                  Amount={obj.Amount}
                            />
                        ))}
                    </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>