tworzenie tablic a w nich obiektów - reactjs

do tablicy(items) wrzucam obiekty, gdy np mam juz 3 obiekty chcialbym po np kliknieciu w button umiescic je w innej tablicy(items2), a tamtą wyzerowac by moc znowu dodawac sobie obiekty i po kolejnym kliknieciu w button stworzyc kolejny raz nowa tablice z nowymi obiektami.
Konkretniej chodzi mi aby w tablicy umieszczac obiekty
items: [{},{},{}] i np jak juz sa 3 obiekty klikam na jakis button
i tworzy mi sie kolejna tablica i w niej te 3 obiekty.
items2:[{},{},{}]
Potem wracam i wrzucam znowu obiekty do 1 tablicy(items)
items: [{},{},{},{}]
i po kliknieciu w button tworzy mi sie kolejna tablica(items3) np z 4 obiektami
items3: [{},{},{},{}]
Dzieki temu moze bym uzyskal zamierzony efekt:
np Pokaz obiekty nr 1: po kliknieciu
pokazą mi się 3 obiekty
Pokaz obiekty nr 2: po kliknieciu
pojawia mi sie np 4 obiekty
Ktoś wie czy dobrze probuje rozwiazac ten problem ? I pomogły mi to zaimplementowac?

Sorry ale post jest dla mnie niezrozumiały. Z czym konkretnie masz problem? Napisz to jaśniej.

nie wiem jak to inaczej wytłumaczyć, to moze opowiem jak to bym chciał w projekcie zrobić. Otóż mam formularz w ktorym wpisuje dane tak jak: Name,Description,Longitude,Latitude po wypełnieniu tych danych na mapce wyswietla mi sie marker o tych wspolrzednych oraz popup z nazwa i opisem jednoczesnie te dane zapisuja mi sie w tablicy:
items:[{Name,Description,,Longitude,Latitude}] jak drugi raz wypelnie formularz to w tablicy sa 2 obiekty i 2 markery na mapce itd..
Chciałbym zeby uzytkownik wchodząc na stronke mial mozliwosć wybrania kilku tras na mapie np kliknie sobie w przycisk "pokaz trase" to wyswietli mu sie na mapie ta trasa skladająca sie np z 3 markerów, jak kolejny raz kliknie w button to wyswietli mu sie kolejna trasa skladajaca się np z 4 markerów itp..

Weź sobie wpisz w Google todo app react i złap jakiś tutorial (byle w miarę świeży, tj. żeby zgadzał się z twoją zainstalowaną wersją React), tam powinno być wyjaśnione, jak zmieniać stan w React, jak manipulować tablicami w taki sposób, żeby React to rozumiał, jak coś dodać do tablicy itp.

Z tego co widzę próbujesz zrobić coś w stylu historii zmian. W tym celu wykorzystałbym oddzielne tablice. Nie sprecyzowałeś czy pracujesz z komponentami funkcyjnymi czy nie, więc takowych użyję w przykładzie:

import * as React from "react";
import ReactDOM from "react-dom";
import { useState, useCallback } from "react";

const App = () => {
  const [elements, setElements] = useState([]); // aktualne elementy
  const [history, setHistory] = useState([]); // nasza historia edycji
  const [currentHistoryIndex, setCurrentHistoryIndex] = useState(0); // aktualnie wyświetlany rekord z historii

  // tutaj zapisujemy wpisy w historii
  const handleOnHistoryPush = useCallback(() => {
    setHistory([...history, elements]);
    setElements([]);
  }, [elements, history]);

  // dodajemy kolejny element do aktualnych elementów
  const appendElement = useCallback(
    value => setElements([...elements, value]),
    [elements]
  );

  return (
    <div style={{display: 'flex', flexDirection: 'row'}}>
      <div>
        Wpisy<br />
        <button onClick={() => appendElement(elements.length)}>Dodaj</button>
        <button onClick={handleOnHistoryPush}>Zapisz</button>
        <ul>
          {elements.map(element => (
            <li>{element}</li>
          ))}
        </ul>
      </div>
      <div>
        Historia<br />
        <select onChange={event => setCurrentHistoryIndex(event.currentTarget.value)}>
          {
            history.map((_, index) => <option key={index} value={index}>{index}</option>)
          }
        </select>
        {history[currentHistoryIndex] && (
          <ul>
            {history[currentHistoryIndex].map(historyRecord => <li>{historyRecord}</li>)}
          </ul>
        )}
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("container"));