2 fields in each element of FieldArray but fields.get(index) can't get second field - redux-form

Question

I have 2 fields in each element of FieldArray,
but I use fields.get(),
it does not return the second field.
In a AvailableShopSelectFields component and isSelected function, I print as...
console.log('isSelected', fields.get(fields.length - 1));
The log will display only 'isSelect { no: 1 }
(I expected it logs { no: 1, id: 'something that I selected' }
Parent and Child components
let ParentComponent = props => {
return (
.
.
<FieldArray name="shopIds" component={AvailableShopSelectFields} />
.
.
)
}
// Child component
const AvailableShopSelectFields = props => {
const { fields } = props;
const [isLastAvailableShopNotSelected, setIsLastAvailableShopNotSelected] = useState(true);
const isSelected = (value) => {
const shopId = fields.get(fields.length - 1).id;
console.log('isSelected', shopId === value, shopId, value, fields.get(fields.length - 1));
!shopId ?
setIsLastAvailableShopNotSelected(true) :
setIsLastAvailableShopNotSelected(false);
};
return (
<>
{fields.map((shopFields, idx) => (
<Row key={idx}>
<Col className="left-panel" span={2}>
<Field name={`${shopFields}.no`} label="No." component={InputField} disabled />
</Col>
<Col className="center-panel" span={12}>
<Field name={`${shopFields}.id`}
label="Shop Name"
component={AvailableShopSelectField}
validate={[VALIDATION.required]}
input={{onChange: isSelected}}
/>
</Col>
<Col className="right-panel">
<Button style={{ borderRadius: '50%', height: 40, width: 40, padding: 0 }}
onClick={() => fields.remove(idx)}
type="reset"
>
-
</Button>
</Col>
</Row>
)
)}
<Row>
<Col align="center" span={16}>
<Button style={{ borderRadius: '50%', height: 40, width: 40, padding: 0 }}
type="reset"
onClick={() => fields.push({ no: fields.length + 1 })}
disabled={isLastAvailableShopNotSelected}
>
+
</Button>
</Col>
</Row>
</>
);
};
AvailableShopSelectField.js
const AvailableShopSelectField = ({ input, label, meta }) => {
const [availableShops, setAvailableShops] = useState([]);
const { error, touched } = meta;
const validate = {
validateStatus: '',
help: ''
};
if (touched && error) {
validate.validateStatus = 'error';
validate.help = error;
}
useEffect(() => {
(async () => await fetchAvailableShops())()
}, []);
const fetchAvailableShops = async () => {
const { data: { data } = {} } = (await API.getMemberCardAvailableShop());
setAvailableShops(data.shops);
};
return (
<FormItem
{...validate}
label={label}
>
<FormSelect
{...input}
onChange={value => input.onChange(value)}
showSearch
style={{ width: "100%" }}
optionFilterProp="children"
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
>
{availableShops.map(shop => (
<Option key={shop.id} value={shop.id}>{shop.name}</Option>
))}
</FormSelect>
</FormItem>
);
};
How can I get the second field?
UI
Redux State (is not update)