Issue using eventHandlers with react-leaflet and next.js

Question

I'm trying to use eventHandlers with react-leaflet in a next.js application, but the events are never being fired.

Here is an example of the code I'm using in my Map component:

import { MapContainer, Rectangle } from "react-leaflet";

const Map = () => {
  return (
    <MapContainer center={[25, 25]} zoom={1} style={{ height: 600, width: 600 }}>
      <Rectangle
        bounds={[
          [0, 0],
          [50, 50],
        ]}
        eventHandlers={{
          click: () => console.log("clicked.."),
        }}
      />
    </MapContainer>
  );
};

export default Map;

I've tried using this code outside of a next.js application (plane react app) and it worked as expected, but when I use it in a next.js application, the event is never fired.

Here is an example of how I'm rendering the Map component in my index.js file:

import dynamic from "next/dynamic";

const Map = dynamic(() => import("../components/Map"), {
  ssr: false,
});

export default function Home() {
  return (
    <>
      <Map />
    </>
  );
}

I also tried using this code in a codesandbox, but I couldn't get the sandbox to work (it crashed). Also tested it on the live editor on https://react-leaflet.js.org/docs/example-popup-marker/ and replacing the marker with the rectangle component, the event is triggered on click.

Has anyone else experienced this issue and found a solution?

Thanks in advance for any help!