defaultActiveKey prop of antd tabs not working in Array.map

I am trying to set the defaultActiveKey for antd tabs. I tried like this:

import React, {useState, useEffect} from "react";
import { Row, Tabs } from "antd";

const { TabPane } = Tabs;

const MyComponent = (props) => {

  const [tabs, setTabs] = useState([]);
  const defaultTab = 'tab2';

  useEffect(() => {
    const tabsData = [
      { name: "Tab 1", key: "tab1" },
      { name: "Tab 2", key: "tab2" },
      { name: "Tab 3", key: "tab3" }
    ];
    setTabs(tabsData);
  }, []);

  return (
    <React.Fragment>
      <Row>
        <Tabs defaultActiveKey={defaultTab}>
         
          {
            tabs.map(({name, key}) => (
              <TabPane tab={name} key={key}>
                Content of {name}
              </TabPane>
            ))
          }
        </Tabs>
      </Row>
    </React.Fragment>
  );
};

I want to set tab2 as the defaultActiveKey but it isn't working. But it's working when I do this:

<Tabs defaultActiveKey={defaultTab}>
  <TabPane tab={tabs[0].name} key={tabs[0].key}>
    <SomeComponent/>
  </TabPane>
  <TabPane tab={tabs[1].name} key={tabs[1].key}>
    <SomeComponent/>
  </TabPane>
  <TabPane tab={tabs[2].name} key={tabs[2].key}>
    <SomeComponent/>
  </TabPane>
</Tabs>

How to solve this?