panel: custom ReactiveHTML unable to render and process MouseEvent correctly

panel version 1.1.1 - Cytoscape.js ver. 3.25.0 rendered using ReactiveHTML, MacOS12.1, Safari 15.2

When using Panel v0.14.1, the component rendered correctly. Mouse clicks were functional and on target. When using Panel v1.1.1, the component can only render on certain layouts and mouse click did not work until manually resize the window. However, when the window scrolled away from original position, the mouse clicks were off target (usually by the same amount of pixels from the original position.

Complete, minimal, self-contained example code that reproduces the issue

from json.tool import main
import param
import panel as pn
from panel.reactive import ReactiveHTML

layouts = {'cose': {'name': 'cose'},
    'grid': {'name': 'grid'},
    'circle': {'name': 'circle'},
    'concentric': {'name': 'concentric'},
    'breadthfirst': {'name': 'breadthfirst'},
    'random': {'name': 'random'},
    'preset': {'name': 'preset'}
}

class Cytoscape(ReactiveHTML):
    layout_names = param.ObjectSelector(default='cose', doc="Layout Options to choose from.", objects=list(layouts.keys()))
    graph_layouts = param.Dict(default=layouts)
    style = param.List(doc="Use to set the styles of the nodes/edges")
    data = param.List(doc="Use to send node's data/attributes to Cytoscape")

    _template = """
        <div id="cy" style="width: 100%; height: 100%; position: relative; border: 1px solid"></div>
    """
    __javascript__ = ['assets/cytoscape.min.js']

    _scripts = {
        'render': """
            state.cy = cytoscape({
              container: cy,
              layout: {name: 'cose'}, //these layout will fail: grid, circle, concentric
              elements: [{data:{id:'A', label:'A'}},{data:{id:'B', label:'B'}}, {data:{source:'A', target:'B'}}],
              zoom: 1,
              pan: {x: 0, y: 0},
            });
            state.cy.on('click', function (evt) {
                console.log(evt.originalEvent, evt)
            });
        """,
        'remove': """
        delete state.cy
        """,
        'layout_names': """
            const layout = state.cy.layout(data.graph_layouts[data.layout_names])
            layout.run()
        """
    }

    _extension_name = 'cytoscape'

pn.extension('cytoscape', template='fast')

my_graph = Cytoscape(width=800, height=400)

widget_container = pn.Column(pn.pane.Markdown("## Title"))
app = pn.Column(widget_container).servable(target='main')
widget_container.append(pn.Row(my_graph.controls(['layout_names']), my_graph))

Initial render - Click on the top node (blue) - note the X-Y coord

Scroll the window the right - Click on the same node - It is off target to the left (note the x-y coord).