Плоский список reactjs по убыванию и возрастанию не работает с раскрывающимся списком

Question

Я перехожу к reactjs. Порядок таблицы не изменяется при изменении раскрывающегося списка.

Компонент смонтировал функцию события ***

        componentDidMount() {
      
                    this.setQuestionCount();
                    this.setQuestionList();
       
     

}}

функция renderAgent для тела таблицы

      renderAgents = (agent, index) => {
            return (
                <tr key={index}>
                    <td>{agent.REF_NO}</td>
                    <td>{Moment(agent.DATE).format('YYYY-MM-DD')}</td>
                    <td>{agent.DEVISION}</td>
                    <td>{(agent.JOB_ROLE)}</td>
                    <td>
                        <Link to={{
                            pathname: '/questionnaireView',
                            state: agent.REF_NO
                        }} ><FolderViewOutlined style={{ fontSize: 25 }} /> View</Link>
    
                    </td>
                    {/* <td>{agent.status}</td> */}
                </tr>
            );
        }

Вот моя функция onChange

       fucntion onChangeOrder = (e) => {
            console.log("order-" + e.target.value);
            this.setState({ orderBy: e.target.value });
        }

выпадающее меню

                       `<div className="form-group filter-input-container">
                                <label htmlFor="company">Sort by</label>
                                <select
                                    id="company"
                                    className="form-control filter_dropdown"
                                    value={this.state.orderBy}
                                    onChange={this.onChangeOrder}
                                >
                                    <option value="true" selected>Newest</option>
                                    <option value="false">Oldest</option>
                                </select>
                            </div>`

Таблица Flatlist

                      <table className="table">
                        <thead>
                            <tr>
                                <th scope="col">Reference</th>
                                <th scope="col">Date</th>
                                <th scope="col">Devision</th>
                                <th scope="col">Job Role</th>
                                <th scope="col">Questionnaire</th>
                            </tr>
                        </thead>

                        <tbody>
                            <FlatList
                                list={this.state.agentsList}
                                renderItem={this.renderAgents}  
                                renderWhenEmpty={this.showBlank} 
                                hasMoreItems={this.state.hasMore}
                                loadMoreItems={this.fetchData}
                                search={{
                                    by: "DEVISION",
                                    term: this.state.dvsn,
                                    caseInsensitive: true,
                                    minCharactersCount: 1,
                                    onEveryWord: false,
                                    by: this.handleSearchMatch
                                }}
                                sort={{
                                    by: ["DATE", { key: "DATE", descending: 
                                    this.state.orderBy}],
                                    descending: true,
                                    caseInsensitive: true
                                }}

                            />
                  [![enter image description here][1]][1]
                        </tbody>
                    </table>

когда загрузка страницы и жесткий код принимают значение true, он работает, но не меняет содержимое в раскрывающемся списке. отреагировать на изменение состояния успешно. Пожалуйста, помогите мне исправить