How to dynamically modify custom buttons on bootstrap table？

I use bootstrap table kit(v1.18.3) to render backend data. (ref: https://bootstrap-table.com/docs/api/table-options/)

There is no problem to show data to my website.But I have a requirement that when the user presses the refresh button, it is possible to hide some custom buttons, and when the user presses the refresh button again, the custom button will be presented again. I am very confuse the final result is that it will be presented according to the initial settings at the beginning. When the user presses refresh, the custom button will not change....

This is the relevant information I found (ref:https://bootstrap-table.com/docs/api/table-options/#buttons)

The following is a fragment of my program, please help, thank you

1. click refresh button event handler:

$('#tableID').on('refresh.bs.table', function (e, params) {
      $('#tableID').bootstrapTable('refreshOptions', {
        showColumns: true,
        buttons: customButtons,
      });
    });

2. customButtons function

var isShow = true;
function buttons () {
    var showornot = isShow;
    isShow = !isShow;
    console.log(`showornot: ${showornot}, isShow: ${isShow}`)
    
    return {
      btnUsersAdd: {
        text: 'Highlight Users',
        icon: 'fa-users',
        render: showornot,
        event: function () {
          alert('Do some stuff to e.g. search all users which has logged in the last week')
        },
        attributes: {
          title: 'Search all users which has logged in the last week'
        }
      },
      btnAdd: {
        text: 'Add new row',
        icon: 'fa-plus',
        render: showornot,
        event: function () {
          alert('Do some stuff to e.g. add a new row')
        },
        attributes: {
          title: 'Add a new row to the table'
        }
      }
    }
  }