React Select с пользовательским MultiValueContainer и мутацией Apollo, не взаимодействующей

У меня есть пользовательский компонент, который использует Apollo и React-Select и имеет две мутации (см. ниже). Выбор реакции является многозначным и должен быть пользовательским, потому что мне нужен флажок «isSelected». Не показано в этом коде, но исходный список параметров передается из родительского контейнера.

Родительский Select и его мутация работают, как и ожидалось. Однако я столкнулся с парой странных проблем с пользовательским контейнером MultiValueContainer. Во-первых, когда я впервые выбираю какой-либо из флажков, я получаю сообщение об ошибке: «Невозможно вызвать setState (или forceUpdate) для несмонтированного компонента». Обратите внимание, что у меня есть пустая функция componentWillUnmount просто для того, чтобы посмотреть, вызывается ли она, а это не так. Но (я предполагаю) в результате этого, когда вызывается мутация "toggleThing", в состоянии нет переменных, необходимых для выполнения запроса. Второй раз, когда я нажимаю, он работает, как и ожидалось, за исключением второй проблемы.

Вторая проблема заключается в том, что функция onCompleted в мутации MultiValueContainer никогда не срабатывает, поэтому, даже если сервер возвращает ожидаемые данные, кажется, что он никогда не возвращается к мутации и, следовательно, никогда к компоненту. Функция onCompleted в родительском элементе Select работает, как и ожидалось.

Заранее спасибо за любые идеи, которые могут быть у кого-то. Возможно, нет нужды говорить, что я относительно новичок в сфере react/apollo/react-select и заранее извиняюсь за любые ошибки новичка. Кроме того, я попытался очистить и упростить код, поэтому приношу свои извинения за любые ошибки переименования.

const UPDATE_THINGS = gql`
    mutation UpdateThings(
        $id: ID!
        $newThings: [ThingInput]
    ) {
        updateThings(
            id: $id
            newThings: $newThings
        ) {
            id
        }
    }
`;

const TOGGLE_THING = gql`
    mutation ToggleThing($id: ID!, $isChecked: Boolean) {
        toggleThing(
            id: $id
            isChecked: $isChecked
        ) {
            id
        }
    }
`;

class ThingList extends Component {
    stylesObj = {
        multiValue: base => {
            return {
                ...base,
                display: 'flex',
                alignItems: 'center',
                paddingLeft: '10px',
                background: 'none',
                border: 'none'
            };
        }
    };

    constructor(props) {
        super(props);

        this.state = {
            selectedThings: [],
            selectedThingId: '',
            selectedThingIsChecked: false
        };
    }

    onUpdateComplete = ({ updateThings }) => {
        console.log('onUpdateComplete');
        console.log('...data', updateThings );
        this.setState({ selectedThings: updateThings });
    };

    onToggleThing = (thingId, isChecked, toggleThing) => {
        console.log('onToggleThing, thingId, isChecked');

        this.setState(
                {
                    selectedThingId: thingId,
                    selectedThingIsChecked: isHighPisCheckedoficiency
                },
                () => toggleThing()
            );
    };

    onToggleThingComplete = ({ onToggleThing }) => {
        console.log('onToggleThingComplete ');
        console.log('...data', onToggleThing );
        this.setState({ selectedThings: onToggleThing });
    };

    handleChange = (newValue, actionMeta, updateThings) => {
        this.setState(
            {
                selectedThings: newValue
            },
            () => updateThings()
        );
    };

    isThingSelected = thing=> {
        return thing.isSelected;
    };

    getSelectedThings = selectedThings => {
        console.log('getSelectedSkills');
        return selectedThings ? selectedThings.filter(obj => obj.isSelected) : [];
    };

    componentWillUnmount() {
        console.log('componentWillUnmount');
    }

    render() {
        const self = this;
        const MultiValueContainer = props => {
            // console.log('...props', props.data);
            return (
                <Mutation
                    mutation={ TOGGLE_THING }
                    onCompleted={self.onToggleThingComplete}
                    variables={{
                        id: self.state.selectedThingId,
                        isChecked: self.state.selectedThingIsChecked
                    }}>
                    {(toggleThing, { data, loading, error }) => {
                        if (loading) {
                            return 'Loading...';
                        }

                        if (error) {
                            return `Error!: ${error}`;
                        }

                        return (
                            <div className={'option d-flex align-items-center'}>
                                <input
                                    type={'checkbox'}
                                    checked={props.data.isChecked}
                                    onChange={evt => {
                                        self.onToggleThing(
                                            props.data.id,
                                            evt.target.checked,
                                            toggleIsHighProficiency
                                        );
                                    }}
                                />
                                <components.MultiValueContainer {...props} />
                            </div>
                        );
                    }}
                </Mutation>
            );
        };

        return (
            <Mutation
                mutation={UPDATE_THINGS}
                onCompleted={this.onUpdateComplete}
                variables={{ id: this.id, newThings: this.state.selectedThings}}>
                {(updateThings, { data, loading, error }) => {
                    if (loading) {
                        return 'Loading...';
                    }

                    if (error) {
                        return `Error!: ${error}`;
                    }

                    return (
                        <div>
                            <Select
                                options={this.props.selectedThings}
                                styles={this.stylesObj}
                                isClearable
                                isDisabled={this.props.loading}
                                isLoading={this.props.loading}
                                defaultValue={this.props.selectedThings.filter(
                                    obj => obj.isSelected
                                )}
                                isOptionSelected={this.isOptionSelected}
                                isMulti={true}
                                onChange={(newValue, actionMeta) =>
                                    this.handleChange(
                                        newValue,
                                        actionMeta,
                                        updateThings
                                    )
                                }
                                components={{
                                    MultiValueContainer
                                }}
                            />
                        </div>
                    );
                }}
            </Mutation>
        );
    }
}

export default ThingsList;