Reactjs 如何更新反应选择列表

我正在尝试从React select更新列表，但无法更新，我不知道为什么会发生这种情况，我认为我的handleChange（）方法中存在问题，但我没有得到什么问题。 谢谢

代码：-

import React, { Component } from 'react';

import Select from 'react-select';
   
class  extends countryComponent {
    constructor(props) {
            super(props);
            this.state = {
              country:[],
            };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        }

 handleChange(event) {
    const { name, value } = event.target;
    this.setState({
      [name]: value
      
    });
  }

  async componentDidMount(){
    await API.get("/country").then(response=>{
      console.log(response);
      this.setState({country:response.data.data.country});
  })     
 Country=()=>{  
  return (this.state.country.map(data => ({ label: data.name, value: data.id })))  
}    
     
    render() { 
        
        return ( <>

                            <Form.Group>
                                <Form.Label id="formLabel">Country</Form.Label>
                                <Select options={this.Country()}/>
                            </Form.Group>
</>)
}
export default Country;

import React，{Component}来自'React'；
从“反应选择”导入选择；
类扩展了countryComponent{
建造师（道具）{
超级（道具）；
此.state={
国家：[]，
};
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
常量{name，value}=event.target；
这是我的国家({
[名称]：值
});
}
异步组件didmount（）{
等待API.get（“/country”）。然后（响应=>{
控制台日志（响应）；
this.setState（{country:response.data.data.country}）；
})     
国家=（）=>{
返回（this.state.country.map（data=>（{label:data.name，value:data.id}）））
}    
render（）{
报税表（
国家
)
}
出口违约国；

您正在异步加载选项。应改用“react-select/async”。请参阅