How to make tabs as dropdown in mobile view

I created this tabs component it works properly in desktop but I want hide this in mobile and show .tabsMobile it is a dropdown. but here dropdown items not clickable. they are not changing when click. what is the problem here. I think onChange event in the Select component is not working. I need to pass the relevant value and change dropdown labal when clicked. then it need to load respective content

   'use client';        
    interface IElementTabs {

    }

const ElementTabs:FC<IElementTabs> = ({}) => {
const [toggleState, setToggleState] = useState(1)

const toggleTab = (index:number) => {
  setToggleState(index)
}

const handleDropdownChange = (value: string | null) => {
 console.log(value);
 if (value !== null) {
  const selectedIndex = parseInt(value);
  setToggleState(selectedIndex);
 } 
 };
 const dropdownData = [
   { value: "1", label: "My details" },
   { value: "2", label: "Purchase history" },
   { value: "3", label: "Subscriptions" },
 ];

return <ElementHolder
  classes={`element element--pt-default element--pb-default tabs`}>
  <Container>
    <div className={styles.tabs}>
      <div className={`${styles.tab} ${toggleState===1 ? styles.tabActive: ''}`} 
     onClick={() => toggleTab(1)}>
      <div className={styles.icon}>
        <Profile />
      </div>
      <p>My details</p>
    </div>
    <div className={`${styles.tab} ${toggleState===2 ? styles.tabActive: ''}`}  onClick={() => toggleTab(2)}>
      <div className={styles.icon}>
        <History />
      </div>
      <p>Purchase history</p>
    </div>
    <div className={`${styles.tab} ${toggleState===3 ? styles.tabActive: ''}`}  onClick={() => toggleTab(3)}>
      <div className={styles.icon}>
        <Subscribe />
      </div>
      <p>Subscriptions</p>
    </div>
  </div>
  <div className={styles.tabsMobile}>
    <Select
      value={toggleState.toString()}
      onChange={(value) => handleDropdownChange(value)}
      data={dropdownData}
      itemComponent={({ label }) => <div>{label}</div>}
    />
  </div>
  
  <div className={styles.tabsContent}>
    <div className={`${styles.content} ${toggleState===1 ? styles.contentActive: ''}`}>
      <p>tab1</p>
    </div>
    <div className={`${styles.content} ${toggleState===2 ? styles.contentActive: ''}`}>
      <p>tab2</p>
    </div>
    <div className={`${styles.content} ${toggleState===3 ? styles.contentActive: ''}`}>
      <p>tab3</p>
    </div>
   </div>
  </Container>
</ElementHolder>
}

 export default ElementTabs;