d3 zoom event not firing for choropleth chart SVG created in storybook using nivo charts

I created a nivo choropleth chart in storybook and I need to add zoom functionality. I have a d3 zoom function which is supposed to listen for the zoom event on my svg. The zoom event doesn't seem to be firing.

The StyledResponsiveChoropleth renders as an SVG in the browser so I am using d3.select("svg") to access the chart.

When I zoom the component in the browser, nothing is happening, looks to me like the zoom event is not registering.

When I listen to mouse wheel events, they do show up.

This is my code below:

export const ChloropethChart: FC<IChoroplethChartProps> = ({
  props
}) => {
  // ***WHAT HAPPENS WHEN HANDLEZOOM IS CALLED????????????

  const selectSVG = select<SVGSVGElement, unknown>('svg')
  const rect = selectSVG
    .append('rect')
    .attr('width', '600px')
    .attr('height', '600px')
    .style('fill', 'none')
    .style('pointer-events', 'all')

  const handleZoom = (e: any) => {
    selectSVG.append('g').attr('transform', e.transform)
  }
  const zoomBehaviour = zoom<SVGSVGElement, unknown>().on('zoom', handleZoom)

  const initZoom = () => {
    selectSVG.call(zoomBehaviour)
  }
  initZoom()

  return (
    <StyledChoroplethChart height={height}>
      <StyledResponsiveChoropleth
        data={data}
        features={featureData}
        margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
        colors={colors ? colors : PURPLE_RANGE}
        domain={domain}
      />
    </StyledChoroplethChart>
  )
}

export default ChloropethChart