How to Add new Tab on Model.

[pedrolucasfsouza]

`
import {Layout, Model, Actions, TabNode, DockLocation} from 'flexlayout-react';
import 'flexlayout-react/style/light.css';
import {Container} from "@/components/Container";
import {Button} from "@/components/Button";

var json = {
global: {},
borders: [],
layout: {
type: "row",
weight: 100,
children: [
{
type: "tabset",

          weight: 50,
          children: [
              {
                  type: "tab",
                  name: "One",
                  component: "button",
              },
              {
                type: "tab",
                name: "Two wefwfhewui Running",
                component: "button",
            }
          ]
      },

      {
        type: "tabset",
        
        weight: 50,
        children: [
            {
                type: "tab",
                name: "One",
                component: "button",
            },
            {
              type: "tab",
              name: "Two wefwfhewui Running",
              component: "button",
          }
        ]
    },
      
  ]

}
};

const model = Model.fromJson(json);

export default function Home() {

const factory = (node: TabNode) => {
var component = node.getComponent();
if (component === "button") {
return <Container className={'bg-red w-12 h-[500px]'}> ;
}
}

const addNewTab = () => {
console.log('823')
model.doAction(Actions.addNode(
{type:"tab", component:"button", name:"a grid", id:"5"},
"1", DockLocation.CENTER, 0));
}

return (

addNewTab()}>Add new Tab

         <Layout
  model={model}
  factory={factory} />

  </Container>

);
}
`

I'm using React Hooks, but i have not been able to add new tabs on json document. I think that i didn't understeand well, can anyone give me help?

My main goal now is: add a new tab on click my button.