我想更新一个状态变量数组，但我不知道如何在更改时更新。我想改变数组“国家”，但当我尝试将其与React-materialize芯片链接时，它不起作用。选择一个选项后：

• 要么我没有办法更新状态变量，我看到了带有X的芯片来删除它
• 要么我有更新状态的功能，但后来我没有看到带X的芯片来删除它

我怎样才能使所选芯片正常显示，同时仍然更新状态变量？谢谢你
下面是我的代码，也可以在CodeSandbox中使用

import React from "react";
import ReactDOM from "react-dom";
import { Icon, Chip} from 'react-materialize';
import 'materialize-css';

    class App extends React.Component {
      constructor() {
        super();
        this.state = {
          name: "Venom",
          countries: [{ name: 'France' }, { name: 'Germany' }],
        };
      }
      handleAddCountry = (e) => {
        console.log("Chip :")
        console.log(e.target.name)
        this.setState({ countries: this.state.countries.concat([{ name: e.target.value }]) });
      }
      handleAddFrance = (e) => {
        console.log("Button:")
        console.log(e.target.value)
        this.setState({ countries: this.state.countries.concat([{ name: e.target.value }]) });
      }
      render() {
        const { countries} = this.state
        return (
        <div>
              <div>
                <h1>{this.state.name}</h1>
              </div>
         
            <div>
                <Chip
                        onChange={ this.handleAddCountry } 
                        close={false}
                        closeIcon={<Icon className="close">close</Icon>}
                        options={{
                        placeholder: 'saisir un territoire',
                        secondaryPlaceholder: '+territoire',
                        autocompleteOptions: {
                        data: {
                        '   France m&#233;tropolitaine  '   :   null,
                        '   DOM - TOM   '   :   null,
                        '   DOM '   :   null,
                        '   Afghanistan '   :   null,
                        },
                        limit: Infinity,
                        minLength: 1,
                        onAutocomplete: function noRefCheck(){}
                        }
                        }}
                />
            </div>
            <button type="button" onClick={this.handleAddFrance} value="France" className="small">Add France</button>
                <br></br>    
                {countries.map(country => <div>{country.name}</div>)}
          </div>
        );
      }
    }
    const rootElement = document.getElementById("root");
    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      rootElement

);