help with primitive layers in deck.gl v9

[cornhundred]

Hi, I'm trying to make a custom primitive layer that uses instancing using deck.gl v9 (this is a continuation of the issue I am having here and I am having trouble making the required changes.

I have an example that uses instancing that works with deck.gll v8 here Deck.gl v8 Custom Layer Instancing and I have tried to update to the requirements for v9 here Deck.gl v9 Custom Layer Instancing

vertexShader = `

#version 300 es

in vec3 positions;
in vec3 instancePositions;
in vec3 instancePositions64Low;
in float instanceRadius;
in vec4 instanceColors;

out vec4 vColor;
out vec2 vPosition;

in vec3 customPickingColors;

void main(void) {
    vec3 offsetCommon = positions * project_size(instanceRadius);
    vec3 positionCommon = project_position(instancePositions, instancePositions64Low);
    gl_Position = project_common_position_to_clipspace(vec4(positionCommon + offsetCommon, 1.0));
  
    vPosition = positions.xy;
    vColor = instanceColors;
  
    picking_setPickingColor(customPickingColors);
}

    `

fragmentShader = `#version 300 es
precision highp float;

in vec4 vColor;
in vec2 vPosition;

out vec4 fragColor;

void main(void) {
    float distToCenter = length(vPosition);
  
    fragColor = vec4(vColor.rgb, vColor.a);
  
    // Should be the last fragment shader instruction that updates fragColor
    fragColor = picking_filterPickingColor(fragColor);
}
`;

 getModel = () => {

     const { device } = this.context; 
      
      // Four corners of the quad
      const positions = new Float32Array([-1, -1, -1, 1, 1, 1, 1, -1]);
    
      const geometry = new luma.Geometry({
        drawMode: device.TRIANGLE_FAN,
        vertexCount: 4,
        attributes: {
          positions: {size: 2, value: positions}
        }
      });
      
      const model = new luma.Model(device, {
        vs: vertexShader, 
        fs: fragmentShader, 
        geometry, 
        isInstanced: true, 
        modules: [deck.picking]      
      });
      
      return model
    
  }

scatter_instancing = {

  class ScatterInstanced extends deck.Layer {
    
    initializeState() {
      
        const {gl} = this.context;

        this.setState({
          model: getModel(gl)
        });      
    
        // Register attributes
        this.state.attributeManager.add({
              instancePositions: {
                size: 3,
                type: gl.DOUBLE,
                transition: true,
                accessor: 'getPosition'
              },
              instanceRadius: {
                size: 1,
                transition: true,
                accessor: 'getRadius',
                defaultValue: 1
              },        
              instanceColors: {
                size: 4,
                normalized: true,
                type: gl.UNSIGNED_BYTE,
                transition: true,
                accessor: 'getColor',
                defaultValue: [0, 0, 0, 255],
              },
              customPickingColors: {
                size: 3,
                type: gl.UNSIGNED_BYTE,
                update: this.calculatePickingColors,
              }                
            });  
        
    }
  
    calculatePickingColors (attribute) {
      const {data} = this.props;
      const {value, size} = attribute;
      let i = 0;

      let index = 0;
      for (const object of data) {
        
        // Use the index index instead of object.id
        const pickingColor = this.encodePickingColor(index); 
        
        value[index * 3] = pickingColor[0];
        value[index * 3 + 1] = pickingColor[1];
        value[index * 3 + 2] = pickingColor[2];
        index++;
      }      
      
    } 
    
  }
  
  ScatterInstanced.layerName = 'ScatterInstanced';

  const layer = new ScatterInstanced({
    id: 'scatter-instancing',
    data: data_inst,
    getPosition: d => [d.x, d.y],
    getRadius: d => 10,
    getColor: [255, 0, 0],
    pickable: true,
    
  });
  
  return layer;
  
}

but I am seeing this error

dist.min.js:1708 deck: initialization of ScatterInstanced({id: 'scatter-instancing'}): Cannot read properties of undefined (reading 'context') TypeError: Cannot read properties of undefined (reading 'context')
    at eval (observablehq-358:5:30)
    at ScatterInstanced.initializeState (observablehq-9:12:18)
    at ScatterInstanced._initialize (dist.min.js:1785:28338)
    at Mn._initializeLayer (dist.min.js:1707:8602)
    at Mn._updateSublayersRecursively (dist.min.js:1707:8345)
    at Mn._updateLayers (dist.min.js:1707:7882)
    at Mn.setLayers (dist.min.js:1707:7044)
    at Mn.updateLayers (dist.min.js:1707:7167)
    at Jf._onRenderFrame (dist.min.js:1708:56567)
    at xl._renderFrame (dist.min.js:1676:26357)

I was able to get a minimal example without instancing to work with deck.gl v9 here Deck.gl v9 Custom Layer but I am having trouble adding instancing. Any help would be greatly appreciated.