TypeError: Cannot read properties of null (reading '_leaflet_disable_click')

I am using react-leaflet with nextjs and I have markers, inside the popups of these markers there is a button that open another page when clicking, but I am getting this error when opening the another page:

Unhandled Runtime Error
TypeError: Cannot read properties of null (reading '_leaflet_disable_click')

Call Stack
NewClass._isClickDisabled
node_modules/leaflet/dist/leaflet-src.js (4350:0)
NewClass._handleDOMEvent
node_modules/leaflet/dist/leaflet-src.js (4357:0)
HTMLDivElement.handler
node_modules/leaflet/dist/leaflet-src.js (2692:0)

The calling of another page is working normally but this error shows while I am not calling _leaflet_disable_click anywhere and I am not sure where it comes from:

const handleOpen = (e, entry) => {
        e.preventDefault()
        setFormData({
            id: entry.id,
            topic: entry.topic,
            field: entry.field,
            officer: entry.officer,
            date: entry.date,
            fresh: entry.fresh,
            createdAt: entry.createdAt,
            createdBy: entry.createdBy,
            level: entry.level,
            category: entry.category,
            type: entry.type,
            lat: entry.lat,
            lng: entry.lng,
            expiresAt: entry.expiresAt
        })
        router.push(`?page=${router.query.page}&form=news_form&id=${entry.id}`, undefined, {shallow: true})
    }

>Solution :

You can fix it by calling e.stopPropagation() when the click event of the button is triggered, so in your case you will add it here:

const handleOpen = (e, entry) => {
        e.stopPropagation()
        e.preventDefault()
        ...
        router.push(`?page=${router.query.page}&form=news_form&id=${entry.id}`, undefined, {shallow: true})
    }

This will also avoid the need of a doubled click to open the new page.