fix executing callback on first render in TabsRound

add initTab property

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@airdao/ui-library",
-  "version": "1.4.20",
+  "version": "1.5.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types.d.ts",

src/components/TabsRound/TabsRound.tsx

@@ -1,20 +1,35 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { TabProps, TabsRoundProps } from './TabsRound.types';
 import propTypes from 'prop-types';
 import s from './tabs-round.module.css';
 
-export function TabsRound({ tabsList, onChange, className }: TabsRoundProps) {
-  const [activeTab, setActiveTab] = useState(0);
+export function TabsRound({
+  tabsList,
+  onChange,
+  className,
+  initialTab,
+}: TabsRoundProps) {
+  const [activeTab, setActiveTab] = useState(() => {
+    if (!initialTab) return 0;
+    const initialTabIndex = tabsList.indexOf(initialTab);
+    return initialTabIndex === -1 ? 0 : initialTabIndex;
+  });
 
-  useEffect(() => onChange(tabsList[activeTab]), [activeTab]);
+  const handleTabChange = useCallback(
+    (index: number) => {
+      setActiveTab(index);
+      onChange(tabsList[index]);
+    },
+    [tabsList, onChange, setActiveTab],
+  );
 
   return (
     <div className={`${s.tabs} ${className || ''}`}>
       {tabsList.map((name, index) => (
         <Tab
           name={name}
           isActive={activeTab === index}
-          onClick={() => setActiveTab(index)}
+          onClick={() => handleTabChange(index)}
           key={`${name}-${index}`}
         />
       ))}

src/components/TabsRound/TabsRound.types.ts

@@ -4,6 +4,7 @@ export interface TabsRoundProps {
   tabsList: string[];
   onChange: (value: string) => void;
   className?: string;
+  initialTab?: string;
 }
 
 export interface TabProps {