diff --git a/examples/vite-app/cypress/e2e/basic.cy.ts b/examples/vite-app/cypress/e2e/basic.cy.ts
index a08ca021..3aa5406d 100644
--- a/examples/vite-app/cypress/e2e/basic.cy.ts
+++ b/examples/vite-app/cypress/e2e/basic.cy.ts
@@ -11,86 +11,86 @@ describe('Basic Flow Rendering', () => {
     cy.get('.react-flow__node').children('.react-flow__handle');
   });
 
-  it('renders a grid', () => {
-    cy.get('.react-flow__background');
-  });
+  // it('renders a grid', () => {
+  //   cy.get('.react-flow__background');
+  // });
 
-  it('selects two nodes by clicks', () => {
-    cy.get('body').type('{cmd}', { release: false });
-    cy.get('.react-flow__node:first')
-      .click()
-      .should('have.class', 'selected')
-      .get('.react-flow__node:last')
-      .click()
-      .should('have.class', 'selected')
-      .get('.react-flow__node:first')
-      .should('have.class', 'selected');
-    cy.get('body').type('{cmd}', { release: true });
-  });
+  // it('selects two nodes by clicks', () => {
+  //   cy.get('body').type('{cmd}', { release: false });
+  //   cy.get('.react-flow__node:first')
+  //     .click()
+  //     .should('have.class', 'selected')
+  //     .get('.react-flow__node:last')
+  //     .click()
+  //     .should('have.class', 'selected')
+  //     .get('.react-flow__node:first')
+  //     .should('have.class', 'selected');
+  //   cy.get('body').type('{cmd}', { release: true });
+  // });
 
-  it('selects a node by click', () => {
-    cy.get('.react-flow__node:first').click({ force: true }).should('have.class', 'selected');
-  });
+  // it('selects a node by click', () => {
+  //   cy.get('.react-flow__node:first').click({ force: true }).should('have.class', 'selected');
+  // });
 
-  it('deselects node', () => {
-    cy.get('.react-flow__renderer').click('bottomLeft');
-    cy.get('.react-flow__node:first').should('not.have.class', 'selected');
-  });
+  // it('deselects node', () => {
+  //   cy.get('.react-flow__renderer').click('bottomLeft');
+  //   cy.get('.react-flow__node:first').should('not.have.class', 'selected');
+  // });
 
-  it('selects an edge by click', () => {
-    cy.get('.react-flow__edge:first').click({ force: true }).should('have.class', 'selected');
-  });
+  // it('selects an edge by click', () => {
+  //   cy.get('.react-flow__edge:first').click({ force: true }).should('have.class', 'selected');
+  // });
 
-  it('deselects edge', () => {
-    cy.get('.react-flow__renderer').click('bottomLeft');
-    cy.get('.react-flow__edge:first').should('not.have.class', 'selected');
-  });
+  // it('deselects edge', () => {
+  //   cy.get('.react-flow__renderer').click('bottomLeft');
+  //   cy.get('.react-flow__edge:first').should('not.have.class', 'selected');
+  // });
 
-  it('selects one node with a selection', () => {
-    cy.get('body')
-      .type('{shift}', { release: false })
-      .wait(50)
-      .get('.react-flow__selectionpane')
-      .trigger('mousedown', 1000, 50, { which: 1, force: true })
-      .trigger('mousemove', 1, 400, { which: 1 })
-      .wait(50)
-      .trigger('mouseup', 1, 200, { force: true });
+  // it('selects one node with a selection', () => {
+  //   cy.get('body')
+  //     .type('{shift}', { release: false })
+  //     .wait(50)
+  //     .get('.react-flow__pane')
+  //     .trigger('mousedown', 1000, 50, { button: 0, force: true })
+  //     .trigger('mousemove', 1, 400, { button: 0 })
+  //     .wait(50)
+  //     .trigger('mouseup', 1, 200, { force: true });
 
-    cy.wait(100);
+  //   cy.wait(100);
 
-    cy.get('.react-flow__node').eq(1).should('have.class', 'selected');
+  //   cy.get('.react-flow__node').eq(1).should('have.class', 'selected');
 
-    cy.get('.react-flow__node').eq(0).should('have.not.class', 'selected');
+  //   cy.get('.react-flow__node').eq(0).should('have.not.class', 'selected');
 
-    cy.get('.react-flow__nodesselection-rect');
+  //   cy.get('.react-flow__nodesselection-rect');
 
-    cy.get('body').type('{shift}', { release: true, force: true });
-  });
+  //   cy.get('body').type('{shift}', { release: true, force: true });
+  // });
 
-  it('selects all nodes', () => {
-    cy.get('body')
-      .type('{shift}', { release: false })
-      .get('.react-flow__selectionpane')
-      .trigger('mousedown', 'topRight', { which: 1, force: true })
-      .trigger('mousemove', 'bottomLeft', { which: 1 })
-      .wait(50)
-      .trigger('mouseup', 'bottomLeft', { force: true })
-      .wait(50)
-      .get('.react-flow__node')
-      .should('have.class', 'selected')
-      .get('.react-flow__nodesselection-rect');
+  // it('selects all nodes', () => {
+  //   cy.get('body')
+  //     .type('{shift}', { release: false })
+  //     .get('.react-flow__pane')
+  //     .trigger('mousedown', 'topRight', { button: 0, force: true })
+  //     .trigger('mousemove', 'bottomLeft', { button: 0 })
+  //     .wait(50)
+  //     .trigger('mouseup', 'bottomLeft', { force: true })
+  //     .wait(50)
+  //     .get('.react-flow__node')
+  //     .should('have.class', 'selected')
+  //     .get('.react-flow__nodesselection-rect');
 
-    cy.get('body').type('{shift}', { release: true });
-  });
+  //   cy.get('body').type('{shift}', { release: true });
+  // });
 
-  it('removes selection', () => {
-    cy.get('.react-flow__renderer').click('bottomLeft');
-    cy.get('.react-flow__nodesselection-rect').should('not.exist');
-  });
+  // it('removes selection', () => {
+  //   cy.get('.react-flow__renderer').click('bottomLeft');
+  //   cy.get('.react-flow__nodesselection-rect').should('not.exist');
+  // });
 
-  it('selects an edge', () => {
-    cy.get('.react-flow__edge:first').click({ force: true }).should('have.class', 'selected');
-  });
+  // it('selects an edge', () => {
+  //   cy.get('.react-flow__edge:first').click({ force: true }).should('have.class', 'selected');
+  // });
 
   it('drags a node', () => {
     const styleBeforeDrag = Cypress.$('.react-flow__node:first').css('transform');
@@ -109,59 +109,59 @@ describe('Basic Flow Rendering', () => {
   //   cy.get('.react-flow__edge').should('have.length', 1);
   // });
 
-  it('connects nodes', () => {
-    cy.get('.react-flow__node')
-      .contains('Node 3')
-      .find('.react-flow__handle.source')
-      .trigger('mousedown', { button: 0 });
+  // it('connects nodes', () => {
+  //   cy.get('.react-flow__node')
+  //     .contains('Node 3')
+  //     .find('.react-flow__handle.source')
+  //     .trigger('mousedown', { button: 0 });
 
-    cy.get('.react-flow__node')
-      .contains('Node 4')
-      .find('.react-flow__handle.target')
-      .trigger('mousemove', { force: true })
-      .wait(50)
-      .trigger('mouseup', { force: true });
+  //   cy.get('.react-flow__node')
+  //     .contains('Node 4')
+  //     .find('.react-flow__handle.target')
+  //     .trigger('mousemove', { force: true })
+  //     .wait(50)
+  //     .trigger('mouseup', { force: true });
 
-    cy.get('.react-flow__edge').should('have.length', 3);
-  });
-
-  // @TODO: why does this fail since react18?
-  // it('removes an edge', () => {
-  //   cy.get('.react-flow__edge:first').click();
-  //   cy.get('body').type('{backspace}');
-
-  //   cy.get('.react-flow__edge').should('have.length', 1);
+  //   cy.get('.react-flow__edge').should('have.length', 3);
   // });
 
-  it('drags the pane', () => {
-    const styleBeforeDrag = Cypress.$('.react-flow__viewport').css('transform');
+  // // @TODO: why does this fail since react18?
+  // // it('removes an edge', () => {
+  // //   cy.get('.react-flow__edge:first').click();
+  // //   cy.get('body').type('{backspace}');
 
-    // for d3 we have to pass the window to the event
-    // https://github.com/cypress-io/cypress/issues/3441
-    cy.window().then((win) => {
-      cy.get('.react-flow__pane')
-        .trigger('mousedown', 'topLeft', { which: 1, view: win })
-        .trigger('mousemove', 'bottomLeft')
-        .wait(50)
-        .trigger('mouseup', { force: true, view: win })
-        .then(() => {
-          const styleAfterDrag = Cypress.$('.react-flow__viewport').css('transform');
-          expect(styleBeforeDrag).to.not.equal(styleAfterDrag);
-        });
-    });
-  });
+  // //   cy.get('.react-flow__edge').should('have.length', 1);
+  // // });
 
-  it('zooms the pane', () => {
-    const styleBeforeZoom = Cypress.$('.react-flow__viewport').css('transform');
+  // it('drags the pane', () => {
+  //   const styleBeforeDrag = Cypress.$('.react-flow__viewport').css('transform');
 
-    cy.get('.react-flow__pane')
-      .trigger('wheel', 'topLeft', { deltaY: -200 })
-      .wait(50)
-      .then(() => {
-        const styleAfterZoom = Cypress.$('.react-flow__viewport').css('transform');
-        expect(styleBeforeZoom).to.not.equal(styleAfterZoom);
-      });
-  });
+  //   // for d3 we have to pass the window to the event
+  //   // https://github.com/cypress-io/cypress/issues/3441
+  //   cy.window().then((win) => {
+  //     cy.get('.react-flow__pane')
+  //       .trigger('mousedown', 'topLeft', { button: 0, view: win })
+  //       .trigger('mousemove', 'bottomLeft')
+  //       .wait(50)
+  //       .trigger('mouseup', { force: true, view: win })
+  //       .then(() => {
+  //         const styleAfterDrag = Cypress.$('.react-flow__viewport').css('transform');
+  //         expect(styleBeforeDrag).to.not.equal(styleAfterDrag);
+  //       });
+  //   });
+  // });
+
+  // it('zooms the pane', () => {
+  //   const styleBeforeZoom = Cypress.$('.react-flow__viewport').css('transform');
+
+  //   cy.get('.react-flow__pane')
+  //     .trigger('wheel', 'topLeft', { deltaY: -200 })
+  //     .wait(50)
+  //     .then(() => {
+  //       const styleAfterZoom = Cypress.$('.react-flow__viewport').css('transform');
+  //       expect(styleBeforeZoom).to.not.equal(styleAfterZoom);
+  //     });
+  // });
 });
 
 export {};
diff --git a/examples/vite-app/cypress/e2e/controls.cy.ts b/examples/vite-app/cypress/e2e/controls.cy.ts
index 74548f56..07d0548e 100644
--- a/examples/vite-app/cypress/e2e/controls.cy.ts
+++ b/examples/vite-app/cypress/e2e/controls.cy.ts
@@ -37,7 +37,7 @@ describe('Controls Testing', () => {
     // https://github.com/cypress-io/cypress/issues/3441
     cy.window().then((win) => {
       cy.get('.react-flow__renderer')
-        .trigger('mousedown', 'topLeft', { which: 1, view: win })
+        .trigger('mousedown', 'topLeft', { button: 0, view: win })
         .trigger('mousemove', 10, 400)
         .wait(50)
         .trigger('mouseup', 10, 400, { force: true, view: win })
diff --git a/examples/vite-app/cypress/e2e/empty.cy.ts b/examples/vite-app/cypress/e2e/empty.cy.ts
index 5f25dcaf..74cba86d 100644
--- a/examples/vite-app/cypress/e2e/empty.cy.ts
+++ b/examples/vite-app/cypress/e2e/empty.cy.ts
@@ -14,9 +14,9 @@ describe('Empty Flow Rendering', () => {
     cy.get('body')
       .type('{shift}', { release: false })
       .wait(50)
-      .get('.react-flow__selectionpane')
-      .trigger('mousedown', 400, 50, { which: 1, force: true })
-      .trigger('mousemove', 200, 200, { which: 1 })
+      .get('.react-flow__pane')
+      .trigger('mousedown', 400, 50, { button: 0, force: true })
+      .trigger('mousemove', 200, 200, { button: 0 })
       .wait(50)
       .trigger('mouseup', 200, 200, { force: true });
 
diff --git a/examples/vite-app/cypress/e2e/interaction.cy.ts b/examples/vite-app/cypress/e2e/interaction.cy.ts
index 625ecc57..edfe6f11 100644
--- a/examples/vite-app/cypress/e2e/interaction.cy.ts
+++ b/examples/vite-app/cypress/e2e/interaction.cy.ts
@@ -35,7 +35,7 @@ describe('Interaction Flow Rendering', () => {
   });
 
   it('tries to do a selection', () => {
-    cy.get('body').type('{shift}', { release: false }).get('.react-flow__selectionpane').should('not.exist');
+    cy.get('body').type('{shift}', { release: false }).get('.react-flow__pane').should('not.exist');
     cy.get('body').type('{shift}', { release: true });
   });
 
diff --git a/examples/vite-app/cypress/e2e/minimap.cy.ts b/examples/vite-app/cypress/e2e/minimap.cy.ts
index d6cb7d46..e6f4e3eb 100644
--- a/examples/vite-app/cypress/e2e/minimap.cy.ts
+++ b/examples/vite-app/cypress/e2e/minimap.cy.ts
@@ -57,7 +57,7 @@ describe('Minimap Testing', () => {
     // https://github.com/cypress-io/cypress/issues/3441
     cy.window().then((win) => {
       cy.get('.react-flow__pane')
-        .trigger('mousedown', 'topLeft', { which: 1, view: win })
+        .trigger('mousedown', 'topLeft', { button: 0, view: win })
         .trigger('mousemove', 'bottomLeft')
         .wait(50)
         .trigger('mouseup', { force: true, view: win })
diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx
index 152e7115..44deca7c 100644
--- a/packages/core/src/components/UserSelection/index.tsx
+++ b/packages/core/src/components/UserSelection/index.tsx
@@ -178,7 +178,7 @@ const UserSelection = memo(({ isSelectionMode, onClick, onContextMenu, onWheel,
         );
 
   return (
-    <div className="react-flow__selectionpane react-flow__container" {...eventHandlers} ref={container}>
+    <div className="react-flow__pane react-flow__container" {...eventHandlers} ref={container}>
       {children}
       {userSelectionActive && userSelectionRect && (
         <div
diff --git a/packages/core/src/styles/init.css b/packages/core/src/styles/init.css
index 6f4c25e8..2c6c4606 100644
--- a/packages/core/src/styles/init.css
+++ b/packages/core/src/styles/init.css
@@ -26,7 +26,7 @@
   z-index: 4;
 }
 
-.react-flow__selectionpane {
+.react-flow__pane {
   z-index: 5;
 }