How to link a react tab to a dropdown?

Question

Normally whenever a tab in the in the tablist list is clicked the text in the corresponding index in tabpanel is displayed. For example, if you click the "Option 2" the text "Panel 2" will be displayed. Now I want the same thing to occur whenever any of the option in the select element is clicked. I tried adding all of the options in the select tag inside a tablist but when i do it it changes the names to "[object]" and whenever the option is clicked the tab isn't changed.

Can you help me out with this thank you

<Tabs defaultIndex={0} onSelect={index => console.log(index)}>
    <div className = "dropMenu">
        <select  className = 'tabSelect' value={this.state.value} onChange={this.tabSwitch}>
            <option value="Option">
                Option
            </option>
            <option value="Option2">
                Option 2
            </option>
            <option value="Option3">
                Option 3
            </option>
        </select>
    </div>
    <TabList>
        <Tab>
            Option
        </Tab>
        <Tab>
            Option 2
        </Tab>
        <Tab>
            Option 3
        </Tab>
    </TabList> 
    <div className='Panel'>
        <TabPanel>
            Panel 
        </TabPanel>
        <TabPanel>
            Panel 2
        </TabPanel>
        <TabPanel>
            Panel 3
        </TabPanel>
    </div> 
</Tabs>

Answer 1

I made some changes to your code. You can do it like this:

  constructor(props) {
    super(props);

    this.state = {
      value: 0,
    };
  }

  setValue = (index) => {
    this.setState({
      value: index,
    });
  };

  render() {
    return (
      <Tabs
        selectedIndex={this.state.value}
        onSelect={(index) => console.log(index)}
      >
        <div className="dropMenu">
          <select
            className="tabSelect"
            onChange={(e) => {
              this.setValue(e.target.selectedIndex);
            }}
          >
            <option value="Option">Option</option>
            <option value="Option2">Option 2</option>
            <option value="Option3">Option 3</option>
          </select>
        </div>
        <TabList>
          <Tab onClick={() => this.setValue(0)}>Option</Tab>
          <Tab onClick={() => this.setValue(1)}>Option 2</Tab>
          <Tab onClick={() => this.setValue(2)}>Option 3</Tab>
        </TabList>
        <div className="Panel">
          <TabPanel> Panel</TabPanel>
          <TabPanel>Panel 2</TabPanel>
          <TabPanel>Panel 3</TabPanel>
        </div>
      </Tabs>
    );
  }