Display grayscale value on mouse click

[daasigenesys-crypto]

I am trying to render 2 layers as:

const localTileServer = 'http://localhost/tiles/{z}/{x}/{y}.png';
  const colorLayer = new TileLayer({
          id: `colorLayer`,
          data: localTileServer,
          minZoom: 0,
          maxZoom: 23,
          tileSize: 256,
          opacity: 0.9,
          pickable: false,
          renderSubLayers: (props: any) => {
            console.log("Inside renderSubLayers for colorLayer")
            const { tile } = props;
            if (!tile || !props.data) return null;
            const { west, south, east, north } = tile.bbox;
            return new BitmapLayer(props, {
              id: `${props.id}-bitmap`,
              data: null as any,
              bounds: [west, south, east, north],
              image: props.data,
              pickable: false,
              onClick: (info) => {
                console.log("Info:", info)
                if (info && info.color) {
                  const ndvi = info.color[0] / 255 * 2 - 1;
                  console.log('NDVI:', ndvi);
                }
              },
            });
          },
        });

  const dataTileServer = 'http://localhost/datalayer/{z}/{x}/{y}.png';
  const dataLayer = new TileLayer({
          id: `dataLayer`,
          data: dataTileServer,
          minZoom: 0,
          maxZoom: 23,
          tileSize: 256,
          opacity: 0.0,
          pickable: true,
          renderSubLayers: (props: any) => {
            console.log("Inside renderSubLayers for datalayer")
            const { tile } = props;
            if (!tile || !props.data) return null;
            const { west, south, east, north } = tile.bbox;
            return new BitmapLayer(props, {
              id: `${props.id}-bitmap`,
              data: null as any,
              bounds: [west, south, east, north],
              image: props.data,
              pickable: true
            });
          },
        });      
        
        const testLayers = [dataLayer, colorLayer];
        
        <DeckGL
          initialViewState={viewState}
          controller={true}
          layers={testLayers}
          viewState={viewState}
          effects={[lightingEffect]}
          onViewStateChange={({ viewState }) => setViewState(viewState)}

          onClick={(info) => {
            if (info && info.color) {
              console.log('Clicked color:', info.color);
            }
          }}      

colorLayer contains the rgba images that I want user to see, and dataLayer contains grayscale image containing the values I want to show when user clicks on colored image. I have thus made dataLayer pickable.

But I see that no matter what's the order of layers in array, onclick is never called. And if I make colorLayer pickable, onclick is called.

What is correct configuration so that I can display grayscale value on click, with color image being displayed.