react async select trouble. Select creation in lopp - html

Question

I have some troubles with asyncselect. Idea is to make a loop with many select fields with names as html array. Like fields[index], field_condition[index]. So for now it loads data into first select, but it doesn't set a value, and it's not loading second select(it take field it and loads data based on that field id), I've checked and all requests seems to be good. Two questions: How to make html arrays using asyncselect and why it doesn't load into second select?
Request for first asyncselect:
loadFields(inputValue) {
const { cookies, getFields } = this.props;
return new Promise(resolve => {
getFields({
headers: {
token: cookies.get('token')
},
per_page: 20,
page: 1,
dispatchAction: false,
resolve: (response) => {
resolve(filter(inputValue, response.data.results.map((field) => ({
...field,
value: field.id,
label: field.name,
}))));
},
reject: (error) => {
resolve(error);
}
});
});
}
Here is my second request that take additional argument(not working at all):
loadFieldConditions(inputValue, filter_id) {
const { cookies, getFieldConditions } = this.props;
return new Promise(resolve => {
getFieldConditions({
headers: {
token: cookies.get('token')
},
field_id: filter_id,
per_page: 20,
page: 1,
dispatchAction: false,
resolve: (response) => {
resolve(filter(inputValue, response.data.results.map((condition) => ({
...condition,
value: condition.id,
label: condition.name,
}))));
},
reject: (error) => {
resolve(error);
}
});
});
}
filter.fields.map((item, index) => {
return <div>
<div className="filter-item">
{/* <span class="missive-column-auto text-e">•</span> */}
<div className="filter-field">
<AsyncSelect
value={ fields[index] }
// onMenuClose={ closeDropdown.bind(null, item.field.id) }
onChange={ onChange.bind(null, 'fields['+index+']') }
className="react-select-container"
ref={(node) => this.fields[index] = node }
loadOptions={ loadFields }
classNamePrefix="react-select"
placeholder="Select field"
blurInputOnSelect={ true }
defaultOptions
cacheOptions
isClearable
/>
</div>
<div className="filter-field">
<AsyncSelect
value={ item.field_condition.id }
// onMenuClose={ closeDropdown.bind(null, item.field.id) }
// onChange={ onChange.bind(null, 'fields', item.field.id) }
className="react-select-container"
// ref={(node) => item.field.id = node }
loadOptions={(inputValue) => { loadFieldConditions(inputValue, item.field.id) }}
classNamePrefix="react-select"
placeholder="Select condition"
blurInputOnSelect={ true }
defaultOptions
cacheOptions
isClearable
/>
</div>