Display Nested Tabs and Table using Ant design

Here i have nested tabs where on parent tabs onchange if sub tabs exist display sub tabs and table else display only table…But once the parent tabs is click there is the update function where i am using setstate rendering the component… I dont want that to happen only when the url is set render the component…

    parentcb = async (key) => {
    this.update(key);
    let result = {
    filter: _filterData,
    limit: this.state.searchLimit,
    page: this.state.searchCurrentPage,
    };
   this.setState({
      url: result,
   })
   };

   update = async (key) => {
   const data = { parentId: key };
   await getTabs(data).then((res) => {
    if (res) {
      this.setState({
        submenu: res.data.data.data,
      });
    }
    });
  };


   <Tabs
    onChange={this.parentcb}
    defaultActiveKey="1"
   >
   <TabPane
   tab={
  <>
      <div> {ele.displayName}</div>
  </>
   }
   key={ele.id}
   >
  <div>
    {this.state.submenu &&
    this.state.submenu?.length > 0 ? (
      <Tabs
        onChange={this.callback}
        type="card"
        defaultActiveKey="1"
        size={"middle"}
        style={{ marginBottom: 32 }}
      >
        {this.state?.submenu?.map((ele, index) => {
          return (
            <>
              <TabPane
                tab={
                  <>
                      <div>{ele.displayName}</div>
                  </>
                }
                key={ele.name}
              >
                <div>
                  <Table url={this.state.url} />
                </div>
              </TabPane>
            </>
          );
        })}
      </Tabs>
       ) : (
      <div>
        <Table url={this.state.url} />
      </div>
      )}
     </div>
     </TabPane>
     </Tabs>

As i am new to react is it i have to use useRef to update the variable…or where i am wrong since setstate is being used for url and submenu…component is rendering twice…How to handle this?