Варианты React-Select как ApolloCient Query

Question

Так что это компонент Select:

<Select
    classes={classes}
    options={suggestions}
    components={components}
    value={this.state.single}
    onChange={this.handleChange('single')}
    placeholder="Search a river"
/>

Это предложения:

const suggestions = [
    { label: 'Afghanistan' },
    { label: 'Aland Islands' },
    { label: 'Albania' },
    { label: 'Algeria' },
    { label: 'American Samoa' },
    { label: 'Andorra' },
    { label: 'Angola' },
    { label: 'Anguilla' },
    { label: 'Antarctica' },
    { label: 'Antigua and Barbuda' },
    { label: 'Argentina' },
    { label: 'Armenia' },
    { label: 'Aruba' },
    { label: 'Australia' },
    { label: 'Austria' },
    { label: 'Azerbaijan' },
    { label: 'Bahamas' },
    { label: 'Bahrain' },
    { label: 'Bangladesh' },
    { label: 'Barbados' },
    { label: 'Belarus' },
    { label: 'Belgium' },
    { label: 'Belize' },
    { label: 'Benin' },
    { label: 'Bermuda' },
    { label: 'Bhutan' },
    { label: 'Bolivia, Plurinational State of' },
    { label: 'Bonaire, Sint Eustatius and Saba' },
    { label: 'Bosnia and Herzegovina' },
    { label: 'Botswana' },
    { label: 'Bouvet Island' },
    { label: 'Brazil' },
    { label: 'British Indian Ocean Territory' },
    { label: 'Brunei Darussalam' },
].map(suggestion => ({
    value: suggestion.label,
    label: suggestion.label,
}));

Как я могу заменить параметры графическим запросом Apoll?:

options={<Query query={RIVERS}>
    {({ loading, error, data }) => {
        if (loading) {
            return [];
        }

        if (error) {
            console.error(error);
        }
        return data.rivers.map(river => ({
            value: river.id,
            label: river.name,
        }));
    }}
</Query>}

Это дает мне ошибку:

react-select.esm.js:2966 Uncaught TypeError: options.reduce is not a function