Visual Builder

I have a list view with ADP data and I have enabled oj-selector for checkbox select, if clicked on checkbox the row has to be selected and row data has to populate into a variable. But that doesn't happen in my case. when I try to assign the selected-keys in oj-selector or selected in oj-list-view to a variable, it is throwing error and nothing is displaying. I will paste my code snippet here. Please help me resolve the issue.

<oj-list-view data="[[ $variables.poDetailsADP ]]" scroll-policy="loadMoreOnScroll"

                on-selected-changed="\[\[$listeners.listViewSelected\]\]" class="oj-listview-item-padding-off" gridlines.item="visibleExceptLast"

                on-first-selected-item-changed="\[\[$listeners.listViewFirstSelectedItem\]\]" selection-mode="multiple"

                selected="{{ $variables.selectedItems }}" selection-required="true">

                    <template slot="itemTemplate">

                          <oj-list-item-layout>

                                <!-- Remove span with class for icon and replace with img to directly use an image -->

                                <!--img src="\[\[ $current.data.image \]\]" slot="leading" width="32" height="32"/-->

                                <div slot="selector">

    <oj-c-selector selected-keys="{{ $variables.selectedItems }}" row-key="\[\[ $current.data \]\]" selection-mode="multiple"

      on-row-key-changed="\[\[$listeners.selectorRowKey\]\]"

      on-selected-keys-changed="\[\[$listeners.selectorSelectedKeys2\]\]"></oj-c-selector>

    </div>

                                <div>




                                      <oj-highlight-text text='\[\[ "Purchase Order: " + $current.data.OrderNumber \]\]'

                                            match-text="Purchase Order:"></oj-highlight-text>

                                </div>