Gutenberg repeater field issue

I want to click a button to add a tab and then have content inside the tab that can also be repeated. Currently the part where I click on the button to add a new tab is working however entering content in tab one duplicates it in tab 2 once I create another tab ie: the inside content of tab 1 and 2 seems linked when it should’t be. I should be able to create multiple tabs and then enter unique data inside each tab.

I think I probably need an array inside the tabs array but not sure how to do this.

registerBlockType("blocks/tabs", {
  title: __("Tabbed Blocks", "custom-blocks"),
  description: __("Tabbed content blocks", "custom-blocks"),
  icon: "smiley",
  category: "custom-category",
  keywords: [__("tabs", "custom-blocks"), __("repeat", "custom-blocks")],
  attributes: {
    tabs: {
      type: "array",
      default: [""],
    },
    tiles: {
      type: "array",
      default: [""],
    },
  },

  edit: (props) => {
    const {
      attributes: { tabs, tiles },
      setAttributes,
    } = props;


    const [showTab, setShowTab] = useState("");

    const handleTabClick = (index) => {
      console.log(index);
      setShowTab(index);
    };

    return (
      <>
        <div className="tabs">
          <ul id="tabs-nav">
            {tabs.map((t, index) => (
              <li>
                <span onClick={() => handleTabClick(index)} id={`#tab${index}`}>
                  <RichText
                    placeholder="Tab title"
                    onChange={(tabTitle) => {
                      const newObject = Object.assign({}, t, {
                        tabTitle: tabTitle,
                      });
                      setAttributes({
                        tabs: [
                          ...tabs.filter((item) => item.index != t.index),
                          newObject,
                        ],
                      });
                    }}
                    value={t.tabTitle}
                  />
                </span>
              </li>
            ))}
          </ul>
          {tabs.map((t, index) => (
            <div
              id={`tab${index}`}
              className={
                showTab == index ? `tab-content show` : `tab-content hide`
              }
            >
              <div className="home-tabs">
                {tiles.map((tile, index) => (
                  <div
                    className="tab-block"
                  >
                    <div className="copy">
                      <RichText
                        tagName="h3"
                        placeholder="Tab Content Title"
                        onChange={(tabTileTitle) => {
                          const newObject = Object.assign({}, tile, {
                            tabTileTitle: tabTileTitle,
                          });
                          setAttributes({
                            tiles: [
                              ...tiles.filter(
                                (item) => item.index != tile.index
                              ),
                              newObject,
                            ],
                          });
                        }}
                        value={tile.tabTileTitle}
                      />
                      <p>
                        Some content...
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
          <Button
            onClick={() => {
              setAttributes({
                tiles: [...tiles, { index: tiles.length }],
              });
            }}
          >
            Add Tile
          </Button>
        </div>
        <Button
          onClick={() => {
            setAttributes({
              tabs: [...tabs, { index: tabs.length }],
            });
            console.log(tabs);
          }}
        >
          Add Tab
        </Button>
      </>
    );
  },
  save: (props) => {
    return null;
  },
});