Layers are not visible although visibility property is specified ?

Nobody has claimed this yet.

**mapbox-gl-js version**:

### Question

I have a weird behavior in showing the raster layer,I have a map and mapbox compare in my app. I add the layers in the style.load event listener like this:

```
if (!map.current.getSource(layer?.layer_name + `-` + layer?.id)) {
map.current.addSource(layer?.layer_name + `-` + layer?.id, {
type: "raster",
url: link,
});
}

if (!map.current.getLayer(layer?.layer_name + `-` + layer?.id)) {
map.current.addLayer({
id: layer?.layer_name + `-` + layer?.id,
layout: {
visibility: layer?.show ? "visible" : "none", //if layer is shown, hide it. and vice versa
},
source: layer?.layer_name + `-` + layer?.id,
type: "raster",
});
}

console.log(
map.current.getLayer(layer?.layer_name + `-` + layer?.id),
layer,
map,
map.current.getLayoutProperty(
layer?.layer_name + `-` + layer?.id,
"visibility"
)
);
```

on initial load for the map everything is looking good and the layers are visible, then when I compare 2 maps then going back to the normal map, all the layers are hidden although I specify the visibility property for the layers but all the layers have a none visibility

### Links to related documentation

Start with the style.load handler and the addSource, addLayer, and getLayoutProperty calls shown in the report. Reproduce the transition between the compared maps, then verify whether the layer visibility state is changed or reapplied during that transition; done means the reported layers retain the requested visibility when returning to the normal map.

Written by the indexing model from the issue text.