Refresh option in grid not working

Hi All,

Trying to refresh using a refresh variable in grid. Facing issue with refresh. Please find below code and let me know if any changes are required.

a!localVariables(
  local!refreshCounter: 0,
  local!startIndex: a!refreshVariable(
    value: 1,
    refreshOnVarChange: local!refreshCounter
  ),
  local!pagingInfo: a!pagingInfo(local!startIndex, 5),
  local!data: a!refreshVariable(
    value: rule!S_getAPI(),
    refreshOnVarChange: local!refreshCounter
  ),
  {
    a!buttonArrayLayout(
      a!buttonWidget(
        label: "Refresh",
        size: "SMALL",
        style: "SECONDARY",
        saveInto: {
          a!save(
            local!refreshCounter,
            local!refreshCounter + 1
          ),
          
        }
      )
    ),
    a!gridField(
      label: "Data",
      labelPosition: "ABOVE",
      data: local!data,
      columns: {
        a!gridColumn(
          label: "First Name",
          sortField: "firstName",
          value: fv!row.firstName
        ),
        a!gridColumn(
          label: "Last Name",
          sortField: "lastName",
          value: fv!row.lastName
        ),
        a!gridColumn(
          label: "Email",
          sortField: "email",
          value: fv!row.email
        ),
        a!gridColumn(
          label: "Phone",
          sortField: "phone",
          value: fv!row.phone
        )
      },
      validations: {},
      pagingSaveInto: a!save(
        local!startIndex,
        fv!pagingInfo.startIndex
      )
    )
  }
)