@panzoom/panzoom does not work when cursor over element

const pz = document.getElementById('panzoom');
    console.log(pz)
    const panzoom = Panzoom(pz, {canvas: true, maxScale:5})
    pz.parentElement.addEventListener('wheel', panzoom.zoomWithWheel)
<script src="https://unpkg.com/@panzoom/[email protected]/dist/panzoom.min.js"></script>
<div style="width:1000px; height:600px; border: 1px solid black;">
    <iframe id="panzoom"  style="width:500px; height:300px; border: 10px solid black;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSiCNMl4OJrlzNToGd32IJd4RShAtxIMJb2hg&s"></iframe>
</div>

I am using this @panzoom/panzoom package to pan-zoom an iframe element. My code is like the following. However, I find that pan and zoom only works when mouse cursor is outside of the iframe. How can I make the pan and zoom still work even when the cursor is over the iframe element?