Состояние Redux обновляется в TextField одного компонента, но не другого компонента с таким же точным TextField

Question

Я использую редук с реакцией. У меня есть два отдельных js файла, которые оба импортируются в индекс. js Js файл # 1 имеет два поля TextFields; У TextField # 1 есть список компаний, а у TextField # 2 есть список контактов, связанных с компанией, выбранной из TextField # 1. Js В файле № 2 просто есть копия TextField # 2. У меня проблема в том, что когда я выбираю компанию из TextField # 1, тогда TextField # 2 в js файле # 1 обновляется, но не TextField # 2 в js файле № 2. Состояние хранится в хранилище и не локально. Это js файл № 1:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as CompanyAction from '../../../../../actions/CompanyAction';
import Input from '@material-ui/core/Input';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import Select from '@material-ui/core/Select';
import TextField from '@material-ui/core/TextField';
import axios from 'axios';
class Component1 extends Component {
    constructor(props) {
        super(props);
        this.handleCompanyNameChange = this.handleCompanyNameChange.bind(this);
    }
    handleCompanyNameChange = e => {
        axios.get('/api/get/getCompany', {
            params: { id: e.target.value }
        }).then(({ data }) => {
            this.props.companyReducer.contacts = data.contacts;
            this.forceUpdate();
        });
    }
    componentDidMount = () => {
        axios.get('/api/get/companies').then(({ data }) => {
            data.sort((a, b) => (a.companyName > b.companyName) ? 1 : -1)
            this.props.companyReducer.companies = data;
            this.forceUpdate();
        });
    }
    handleGlobalChange = e => {
        e.preventDefault();
        this.props[e.target.name](e.target.value);
    };
    render() {
        const {
            handleCompanyNameChange,
            handleGlobalChange,
        } = this;
        return (
            <div>
                <TextField
                    select
                    label="Select Company"
                    value={this.props.companyReducer.companyId}
                    onChange={handleCompanyNameChange}
                    SelectProps={{}}>
                    <MenuItem value="">
                        <em>None</em>
                    </MenuItem>>
                        {this.props.companyReducer.companies.map((option, idx) => (
                        <MenuItem value={option.companyId}>
                            {option.companyName}
                        </MenuItem>
                    ))}
                </TextField>
                <TextField
                    select
                    label="Select Contact"
                    name="contactIdChange"
                    value={this.props.companyReducer.contactId}
                    onChange={handleGlobalChange}
                    SelectProps={{}}>
                    <MenuItem value="">
                        <em>None</em>
                    </MenuItem>>
                        {this.props.companyReducer.contacts.map((option, idx) => (
                        <MenuItem value={option.contactId}>
                            {option.firstName}
                        </MenuItem>
                    ))}
                </TextField>
            </div>
        )
    }
}
const mapStateToProps = (state, ownProps) => {
    return {
        companyReducer: state.companyReducer
    }
};
const mapDispatchToProps = (dispatch) => {
    return {
        companyNameChange: companyName => dispatch(CompanyAction.companyNameChange(companyName)),
    }
};
export default connect(mapStateToProps, mapDispatchToProps)(Component1 );

Это js файл № 2:

import React from 'react';
import { connect } from 'react-redux';
import * as CompanyAction from '../../../../../actions/CompanyAction';
import TextField from '@material-ui/core/TextField';
import Input from '@material-ui/core/Input';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
class Component2 extends React.Component {
    constructor(props) {
        super(props);
    }
    handleGlobalChange = e => {
        e.preventDefault();
        this.props[e.target.name](e.target.value);
    };
    render() {
        const {
            handleGlobalChange,
        } = this;
        return (
            <div>
                <TextField
                    select
                    label="Select Contact"
                    name="contactIdChange"
                    value={this.props.companyReducer.contactId}
                    onChange={handleGlobalChange}
                    SelectProps={{}}>
                    <MenuItem value="">
                        <em>None</em>
                    </MenuItem>>
                        {this.props.companyReducer.contacts.map((option, idx) => (
                        <MenuItem value={option.contactId}>
                            {option.firstName}
                        </MenuItem>
                    ))}
                    </TextField>
            </div>
        )
    }
}
const mapStateToProps = (state, ownProps) => {
    return {
        companyReducer: state.companyReducer
    }
};
export default connect(mapStateToProps)(Component2 );

оба эти файла импортируются в один js файл с именем index. js. Любая помощь по этому вопросу будет принята с благодарностью.