Wireframe spheres not selectable?

[spadavec]

I have a number of testSpheres in a stage that have different colors:

testSpheres.forEach((sphere: any) => {
      const { X, Y, Z, sphereId} = sphere;
      if (p4type === 'A') {
        shapes.addSphere([X, Y, Z], [0.87, 0.16, 0.2], 1, sphereId);
      } else if (p4type === 'B') {
        shapes.addSphere([X, Y, Z], [0.003, 0.59, 0.96], 1, sphereId);
      } else {
        shapes.addSphere([X, Y, Z], [0.97, 0.97, 0.99], 1, sphereId);
      }
    });

    const shapeComp: any = stage.addComponentFromObject(shapes);
    shapeComp.addRepresentation('buffer', { wireframe: true });

However, whenever I try to click on them in the stage, I can't seem to select the object itself:

    stage.signals.clicked.add((pp: any) => {
      const pid = _.get(pp, 'pid');
      console.log('this is the pid');
      console.log(pid);
      const sphereName = _.get(
        pp,
        'picker.shape._primitiveData.sphereName',
        []
      );

This will always return undefined. However, if I make them solid (e.g. wireframe : false) then I can select them. Is there a way around this?