Adding multi-select dropdowns with a button click

Question

I have created a dynamic multi-select dropdown using react-select. The add button returns a new multi-select dropdown just below the previous dropdown. Similarly I can add any number of drop-downs. Also, I am storing the selected values in a state: selectedOption_cd so that when I click on submit button I can get all the selected values as an object. This works fine for a single multi-select dropdown. But when I try to add more dropdowns(by clicking add button), they come up with already selected values from the first dropdown because they are using the same state to store the values. Adding or removing any selection affects all the drop-downs as they are using same state: selectedOption_cd for storing selected values. Here is the code

import React  from 'react';
import Select from 'react-select'
import axios from 'axios'

class Connectivity_Details extends React.Component {
  constructor(){
    super();
    this.state = {
      add_dd: [
        {dd_num: ""}
      ]
  };
  }

  async componentDidMount() {   
    const res = await axios.get(api, {
   auth: {
      username: 'abc',
      password: '123'
   }
})
      .then((res) => {
        console.log("res.data:" ,res.data)
        let updated_options = res.data.map((item) => {
          return {
            id: item.id,
            value: item.name,
            label: item.name
          }
        });
        const dd_options = updated_options
        this.setState({ dd_options })
        console.log("updated_options: ",this.state.dd_options)         
      }).catch(error => {
        console.error("Error: ",error);
      });
    }

  

  // add another dropdown for data-fields when add btn is clicked
  add_dd(){
    this.state.add_dd.push({dd_num:""})
    const dd_to_add = this.state.add_dd.length
    this.setState({ dd_to_add })
    console.log("add btn clicked. State: ",this.state.dd_to_add)
  }
 
  // store selected values for data-fields-dropdown 
  data_fields_dropdown = selectedOption_cd => {
    this.setState({selectedOption_cd});
    console.log("dd options selected for connectivity:", this.state.selectedOption_cd);
  };

  submit_cd(){
    const connectivity_details_data = {
      "data_fields_cd": this.state.selectedOption_cd
    }
    console.log("connectivity_details_data: ",connectivity_details_data)
  }
   
render() {
  const { selectedOption_cd } = this.state;
    return (
      <React.Fragment>
      <div>
        <br /> <br /> 
        <b>Connectivity Details</b> 
        <br /> <br /> 
        <hr />
        <br />
        
        <label style={{color:'black', fontSize:'13px'}}>Data Fields :</label> &emsp;
         {/* Multi-select Dropdown */}
         {
        this.state.add_dd.map((e,i) =>
        {
          return(
          <Select 
          options={this.state.dd_options}
          isMulti={true}
          closeMenuOnSelect={false}
          value={selectedOption_cd}
          onChange={this.data_fields_dropdown}
          />)
        })
        }        
        
        {/* Button to add dropdowns */}
        <button style={{color:'white' , fontSize:'13px', background:'blue', float:'left'}} onClick={()=> {this.add_dd()}}>
        Add
            </button>
       
        <br /> <br /> <br />
        <button style={{color:'white' , fontSize:'13px', background:'green'}} onClick={()=> {this.submit_cd()}}>
        Submit
          </button>
        <br /> <br /> <br />
        <hr />
      </div>
      </React.Fragment>
    );  
    }
  }
  
  export default Connectivity_Details;

Any help would be highly appreciated.