Openlayer interaction: callbacks not getting fired

I'm trying to listen for PinchZoom interaction but I'm getting nothing in the callback.

Creating the map

this.map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      view: new View({
        center: [0, 0],
        zoom: 2,
      }),
    });

Listening for pinch interactions

const mapInteraction = new PinchZoom();
mapInteraction.on('change:active', (event) => {
      console.log('event', event);
    });
this.map.addInteraction(mapInteraction);

I've tried with MouseWheelZoom event also, but the same issue occurs there too. Am I misunderstanding the purpose of these "on" functions?

Here's a simple stackblitz