Multiply 2 sources, WebGlLayer (openlayers)

I have been struggling with this whole night. All I want to do is multiply two rasters together. I know I can do that with RasterSource, but I need better performance. When I create a layer (webgl) for each individual source, extracting the data works fine: [“band”, 1], … [“band”, 4], where the first 3 bands are the same (storing byte), and the fourth is the opacity. But if I have 2 or more sources, I can’t extract the data from more than one source (which, funnily enough, is always the the last one in the array).

import WebGLTileLayer, { Style as WebGLStyle } from 'ol/layer/WebGLTile';
const src1 = createXYZ(url1)
const src2 = createXYZ(url2)


const product = ["*", ["band", 1], ["band", 5]] // 5 since 4 + 1, this should be the red channel of src2, right?

const style: WebGLStyle = {
    color: [
        'case',
        ['<', product, 0.5],
        [0, 0, 0, 0],
        [255, 0, 0, 1]]
}
const layer = new WebGLTileLayer({
    sources: [src1, src2],
    style,

})

What I want to do is to extract the data from each source. I tried [“band”, 5], but nothing is there.Ive tried other band indexes but either I get nothing, or just the data from src2. What am I doing wrong?