I am trying to recreate the Mapbox GL JS toggle example here: https://docs.mapbox.com/mapbox-gl-js/example/toggle-layers/

In the example, when you click on the button it immediately changes its state to non-visible and turns the layer off. In my code you have to initially click on the button twice to get it to change to non-visible and turn the layer off and after that the button behaves normally. Any suggestions on how to get it so you only have to click once initially? This is the section of the code I think is problematic:

 for (const id of toggleableLayerIds) {
// Skip layers that already have a button set up.
if (document.getElementById(id)) {
continue;
}


// Create a link.
const link = document.createElement('a');
link.id = id;
link.href = '#';
link.textContent = id;
link.className = 'active';
 
// Show or hide layer when the toggle is clicked.
link.onclick = function (e) {
const clickedLayer = this.textContent;
e.preventDefault();
e.stopPropagation();

 
const visibility = map.getLayoutProperty(
clickedLayer,
'visibility'
);