Card Layout, Limitation as a grid

load(
  local!counter: 20,
  a!cardLayout(
    contents: {
      a!forEach(
        items: enumerate(local!counter)+1,
        expression: {
          a!cardLayout(
            contents: {
              a!richTextDisplayField(
                value: a!richTextHeader(text: "Counter" & fv!item)
              )
            },
            shape: "ROUNDED",
            padding: "STANDARD",
            marginBelow: "STANDARD"
          )
        }
      ),
      a!cardLayout(
        contents: {
          a!richTextDisplayField(
            labelPosition: "COLLAPSED",
            value: {
              a!richTextIcon(icon: "repeat", size: "MEDIUM"),
              a!richTextItem(text: " Load More", style:"STRONG" )
            },
            align: "CENTER"
          )
        },
        link: a!dynamicLink(
          saveInto: {a!save(local!counter, local!counter+20)}
        ),
        height: "AUTO",
        style: "ACCENT",
        marginBelow: "NONE"
      )
    },
    showBorder: false()
  )
)

when the user clicks on "Load more" button, 20 more activities should be displayed along with previous 20 activities and so on.

I'm able to display the above, but what the issue is "when a user click on the Load more option to view the remaining activities,

the user is routed to the very 1st activity ID and then the user has to scroll down again".

what was expected was: " the system should display more activities when clicked on load more. the load more should start from

the below the last activity before clicking on Load more".