Пользовательский компонент React-Admin

Question

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

render() {
        return (
            <React.Fragment>
                <Paper>
                    {this.state.scopes.map((item, key) => {
                        return (
                            <Chip
                                key={key}
                                label={item.description}
                                onDelete={(e) => this.handleDelete(e, item)}
                            />
                        )
                    })}
                </Paper>

                <div>
                    <button onClick={(e) => this.displayChoices(e)}>
                        {this.state.show ? <span>Hide Scopes Select List</span> : <span>Show Scopes Select List</span>}
                    </button>
                    <div/>
                    {this.state.show ? <Field name="scope" component="Select" placeholder="Spaces"
                                              onChange={(e) => this.handleAdd(e)}>
                        {this.state.data.map((option, index) =>
                            <option key={index} value={JSON.stringify(option)}>
                                {option.description}
                            </option>
                        )}
                    </Field> : ''}
                </div>
            </React.Fragment>
        )
    }
}

Мне удалось удалить и добавить в ChipArray, но когда я сохраняю изменения не были приняты, вот функции удаления и добавления:

handleAdd = (e) => {
        e.preventDefault();
        const value = JSON.parse(e.target.value);
        let selectedScopes = this.state.scopes;
        if (selectedScopes.filter(s => (s.id === value.id)).length === 0) {
            selectedScopes.push(value);
            this.setState({scopes: [...selectedScopes]});
        }
    };

 handleDelete = (e, value) => {
        e.preventDefault();
        const selectedScopes = this.state.scopes;
        this.setState((prevState, props) => {
            return {scopes: prevState.scopes.filter(scope => scope !== value)};
        })
    };

Я знаю, что я должен использовать <Field/> из "Reaction-Final- форма ", но я не уверен, как или где. Очень жаль, если этот вопрос задавался раньше, но я посмотрел онлайн, и мне не повезло, и я застрял на этом. Спасибо