Adding UserOrGroup Picker component(which allows to select multiple users) in Editable grid

I have added a user or group picker component in my editable grid. in that the user or group picker field will be added dynamically on click of the dynamic link created. But i was able to select only one user in the user or group picker component, i made the maxSelection value to be 5. Then also i could not able to select multiple user. It shows the below error message on selct of the second user in user picker.

"Could not display interface. Please check definition and inputs. Interface Definition: Expression evaluation error: An error occurred while executing a save: java.lang.IllegalArgumentException: Invalid value of type 'List of User or Group' assigned to union of type 'User or Group' "

My Code for Editable Grid with user picker field.

a!gridLayout(
label: "",
emptyGridMessage: "No Text Field",
headerCells: {
a!gridLayoutHeaderCell(
label: "Approvers"
),
a!gridLayoutHeaderCell(
label: "Delete"
)
},
columnConfigs: {
a!gridLayoutColumnConfig(
width: "DISTRIBUTE"
),
a!gridLayoutColumnConfig(
width: "ICON"
)
},
rows: a!forEach(
items: ri!Approvers,
expression: a!gridRowLayout(
id: fv!index,
contents: {
a!pickerFieldUsersAndGroup(
label: "No",
labelPosition: "ABOVE",
maxSelections: 5,
value: fv!item,
saveInto: fv!item,
validations: {}
),
a!imageField(
label: "delete " & fv!index,
images: a!documentImage(
document: a!iconIndicator(
"REMOVE"
),
altText: "Text Filed " & fv!index,
caption: "Text Filed " & fv!index,
link: a!dynamicLink(
value: fv!index,
saveInto: {
a!save(
ri!Approvers,
remove(
ri!Approvers,
save!value
)
)
}
)
),
size: "ICON"
)
}
)
),
selectionValue: ri!Approvers,
selectionSaveInto: ri!Approvers,
addRowlink: a!dynamicLink(
label: "Add Approver",
value: {
""
},
saveInto: {
a!save(
ri!Approvers,
append(
ri!Approvers,
save!value
)
)
}
)
)