Как получить данные из пользовательского компонента?

Question

У меня есть действие редактирования внутри моего файла модели.Я использую компоненты по умолчаниюact-admin, к сожалению, мне пришлось создать свой пользовательский компонент, и после отправки формы данные из этого пользовательского компонента не были предоставлены.

Я попытался обернуть весь компонент внутри <FormControl>, это не подходит для меня.

Мой компонент:

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Input from '@material-ui/core/Input';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import Chip from '@material-ui/core/Chip';
import { fetchUtils } from 'react-admin';

const styles = theme => ({
    root: {
      display: 'flex',
      flexWrap: 'wrap',
    },
    formControl: {
      margin: theme.spacing.unit,
      minWidth: 120,
      maxWidth: 300,
    },
    chips: {
      display: 'flex',
      flexWrap: 'wrap',
    },
    chip: {
      margin: theme.spacing.unit / 4,
    },
    noLabel: {
      marginTop: theme.spacing.unit * 3,
    },
  });

  const ITEM_HEIGHT = 48;
  const ITEM_PADDING_TOP = 8;
  const MenuProps = {
    PaperProps: {
      style: {
        maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
        width: 250,
      },
    },
  };

  function getStyles(name, that) {
    return {
      fontWeight:
        that.state.name.indexOf(name) === -1
          ? that.props.theme.typography.fontWeightRegular
          : that.props.theme.typography.fontWeightMedium,
    };
  }

var names = [];

class MultipleSelect extends React.Component {
    state = {
        name: [
        ]
    };

    getRoles() {
        const url = 'URLTOENDPOINT'
        var data = [];
        fetchUtils.fetchJson(url, {
            method: "GET",
        })
        .then(response => {
            Object.keys(response.json.value).forEach(function (key) {
                var object = response.json.value[key];
                data.push({
                  name: object.Name,
                  value: object.Id
                });
            })
            this.setState({name: data});
        });
    }

    getAllOptions() {
      const url = 'URLTOENDPOINT'
      var data = [];
      fetchUtils.fetchJson(url, {
          method: "GET",
      })
      .then(response => {
          Object.keys(response.json.value).forEach(function (key) {
              var object = response.json.value[key];
              data.push({
                name: object.Name,
                value: object.Id
              });
          })
          names = data;
      });
  }

    componentDidMount() {
        this.getRoles();
        this.getAllOptions();
        this.forceUpdate();
    }

    handleChange = event => {
      console.log("y",event);
      this.setState({ name: event.target.value });
    };

    render() {
      const { classes } = this.props;

      return (
        <div>
            <FormControl>
                <InputLabel htmlFor="UserRoles">Chip</InputLabel>
                <Select
                    multiple
                    value={this.state.name}
                    onChange={this.handleChange}
                    input={<Input id="UserRoles" />}
                    renderValue={selected => (
                    <div className={classes.chips}>
                        {selected.map(obj => (
                          <Chip key={obj.value} label={obj.name} className={classes.chip} />
                        ))}
                    </div>
                    )}
                    MenuProps={MenuProps}
                >
                    {names.map(obj => (
                      <MenuItem key={obj.value} value={obj.value} style={getStyles(obj.name, this)}>
                          {obj.name}
                      </MenuItem>
                    ))}
                </Select>
            </FormControl>
        </div>
      );
    }
  }

  MultipleSelect.propTypes = {
    classes: PropTypes.object.isRequired,
  };

  export default withStyles(styles, { withTheme: true })(MultipleSelect);

EditAction:

export const UserEdit = props => (
  <Edit {...props} title={<UserTitle/>} aside={<Aside />}>
    <SimpleForm>
      <DisabledInput source="Id" />
      <TextInput source="Login" validate={required()} />
      <TextInput source="Email" type="email" validate={required()} />

      <ReferrenceSelectBox source="UserRoles" />

      <NullableBooleanInput source="Active" />
      <DateField source="CreatedDate" showTime
        locales={process.env.REACT_APP_LOCALE}
        disabled={true} />
    </SimpleForm>
  </Edit>
);

Мне нужно показать окно множественного выбора с выбранными данными изAPI, поэтому я написал пользовательский компонент, потому что компоненты по умолчанию мне не помогли, но это ничего не изменило, а также данные не отображаются.