Как заполнить раскрывающийся список на основе другого раскрывающегося списка для указанной строки c в реагирующей таблице v.6

Question

У меня есть две колонки с выпадающими. Когда я выбираю параметр из любого раскрывающегося списка первого столбца, список параметров должен изменяться в раскрывающемся списке второго столбца в той же строке. В действительности это влияет на весь столбец и вносит изменения во все выпадающие списки.

Как сделать так, чтобы изменения в левом раскрывающемся списке влияли только на следующий правый раскрывающийся список? Это мой код:

const contact = {
"Phone #": [
    { val: 0, text: 'Cell Phone' },
    { val: 1, text: 'Home Phone' },
    { val: 2, text: 'Office Phone 1' },
    { val: 3, text: 'Office Phone 2' },
    { val: 4, text: 'Phone 10' },
    { val: 5, text: 'Phone 2' },
    { val: 6, text: 'Phone 4' },
    { val: 7, text: 'Phone 5' },
    { val: 8, text: 'Phone 6' },
    { val: 9, text: 'Phone 7' },
    { val: 10, text: 'Phone 8' },
    { val: 11, text: 'Phone 9' },
    { val: 12, text: 'Primary Contact Type' }
],
"E-mail": [
    { val: 0, text: 'Credit Card Notices only email' },
    { val: 1, text: 'Email 1' },
    { val: 2, text: 'Email 2' },
    { val: 3, text: 'Email 3' },
    { val: 4, text: 'Email 4' },
    { val: 5, text: 'ePrice Quote only email' },
    { val: 6, text: 'pegasus Tablet Email' },
    { val: 7, text: 'Statement only email Address' }
],
"DTN": [
    { val: 0, text: 'DTN #1' },
    { val: 1, text: 'DTN #2' },
    { val: 2, text: 'DTN #3' }
]
 }

И

class ContactDocMaintenance extends Component {
constructor(props) {
    super(props);
    this.state = {
        data: { data },
        defValue: false,
        contactValue: 'Phone #'
    }
}
onChange = ({ target: { value } }) => {
    this.setState({ contactValue: value });
}
render() {
    const { contactValue } = this.state;
    const options = contact[contactValue];
    return (
        <div className="row">
            <div className="col-8">
                <div className="row">
                    <div className="col-12 mt-2">
                        <ContentCard name="Contact Information" >
                            <ReactTable
                                data={data}
                                keyField="id"
                                pageSizeOptions={[20, 30, 50, 100, 200, 500]}
                                columns={[
                                    {
                                        Header: "Status",
                                        accessor: "status",
                                        width: 100,
                                    },
                                    {
                                        Header: "Contact Type",
                                        id: "contactType",
                                        accessor: "contactType",
                                        width: 100,
                                        Cell: row => (<select onChange={this.onChange} margins="m-0" >
                                            < option value="Phone #" > Phone #</option>
                                            <option value="E-mail">E-mails</option>
                                            <option value="DTN">DTN</option>
                                        </select>)
                                    },
                                    {
                                        Header: "Contact Type Description",
                                        accessor: "contactTypeDescription",
                                        width: 200,
                                        Cell: row => (<select margins="m-0" >{options.map((opt) => <option key={opt.val} value={opt.val}>{opt.text}</option>)}</select>)
                                    },
                                    {
                                        Header: "Contact value",
                                        accessor: "contactValue",
                                        width: 100
                                    },
                                    {
                                        Header: "Notification",
                                        accessor: "notification",
                                        width: 100
                                    }
                                ]}
                                defaultPageSize={10}
                                className="-highlight"
                                showPagination={false}
                            />
                        </ContentCard>
                    </div>
                </div>
            </div>
        </div>
    );
}
}
export default ContactDocMaintenance;

Данные:

const data = [    {
"status": "",
"contactType": "",
"contactTypeDescription": "",
"contactValue": "(235)253-4524",
"notification": "",
},
{
"status": "",
"contactType": "",
 "contactTypeDescription": "",
"contactValue": "(450)454-7878",
"notification": "",
},
 {
  "status": "",
 "contactType": "",
 "contactTypeDescription": "",
 "contactValue": "(514)777-7777",
 "notification": "",
 },
{
"status": "",
"contactType": "",
"contactTypeDescription": "",
"contactValue": "(235)253-4524",
 "notification": "",
},
 {
  "status": "",
   "contactType": "",
  "contactTypeDescription": "",
 "contactValue": "(450)454-7878",
  "notification": "",
  },
 {
    "status": "",
   "contactType": "",
   "contactTypeDescription": "",
    "contactValue": "(514)777-7777",
   "notification": "",
   },
 {
    "status": "",
  "contactType": "",
  "contactTypeDescription": "",
  "contactValue": "(514)777-7777",
  "notification": "",
  }, 
  {
  "status": "",
  "contactType": "",
  "contactTypeDescription": "",
 "contactValue": "(450)454-7878",
  "notification": "",
  },
  {
  "status": "",
  "contactType": "",
  "contactTypeDescription": "",
 "contactValue": "(450)454-7878",
 "notification": "",
   },
{
  "status": "",
  "contactType": "",
  "contactTypeDescription": "",
  "contactValue": "(450)454-7878",
  "notification": "",
   }

 ]