Help to understand how setVisibleLayers works with WAB2.1

[AndžejMiloš]

I write a widget for WAB 2.1 where I add 3 Dynamic MapService Layers hosted on ArcGIS Server. Every layer has one sublayer visible at widget startup. 

var layer1 = new ArcGISDynamicMapServiceLayer("http://62.236.121.188/arcgis/rest/services/DataAndMaps/Background/MapServer", {"id": "Background"});
layer1.on("load", function (e) {
layer1.setVisibleLayers([2]);
map.addLayer(layer1);
});
var layer2 = new ArcGISDynamicMapServiceLayer("http://62.236.121.188/arcgis/rest/services/DataAndMaps/Pressures/MapServer", {"id": "Pressures"});
layer2.on("load", function (e) {
layer2.setVisibleLayers([2]);
map.addLayer(layer2);
});
var layer3 = new ArcGISDynamicMapServiceLayer("http://62.236.121.188/arcgis/rest/services/DataAndMaps/MSP/MapServer", {"id": "MSP"});
layer3.on("load", function (e) {
layer3.setVisibleLayers([2]);
map.addLayer(layer3);
});

When the button is clicked, visible sublayers in every layers should be changed. I want to get sublayer 2 not visible and sublayer 3 becomes visible for every layer.

function onLayerListItemClick(e) {
layer1.setVisibleLayers([3]);
layer2.setVisibleLayers([3]);
layer3.setVisibleLayers([3]);
}

What happens on click, is that the last (of three) layer changes visibility of sublayers as expected. First layer makes visible 14 sublayers and second - 33 sublayers. 

I did the same task thing not using WAB, but just Javascript API for ArcGIS 3.18. And it work fine! Sublayers 2 become not visible and sublayers 3 become visible for every layer.

I do not understand why is this happening. Can, please, somebody from WAB team explain what is going under calling setVisibleLayers() and what I should do to make my WAB widget do the same thing that I can do with pure Javascript API.

Source code WAB Widget and JSAPI versions are attached.

Kind regards,

Andžej