CustomDivMarker

[lindaifu]

import { useEffect } from "react"
import { createPortal } from "react-dom"
import L from "leaflet"
import { Marker } from "react-leaflet"

/** CustomDivMarker
 * @param {Array} position - [lat,lng]
 * @param {ReactNode} content
 * @param {ReactNode} children
 * @param {Boolean} draggable
 * @param {Object} eventHandlers
 * */ 
const CustomDivMarker= (props) => {
    const {
        position = [0, 0],
        content,
        children,
        draggable = false,
        eventHandlers = {}
    } = props
    const iconElement = document.createElement("div")
    // iconElement.className = "custom-icon-className"
    
    // 'content' node is placed inside the 'iconElement' node
    const portal = createPortal(content, iconElement)

    const divIcon = L.divIcon({
        html: iconElement
    })
    
    useEffect(() => {
        return () => {
            iconElement.remove()
        }
    })

    return (
        <>
            {portal}
            <Marker
                position={position}
                icon={divIcon}
                draggable={draggable}
                eventHandlers={eventHandlers}
            >
                {children}
            </Marker>
        </>
    )
}

export default CustomDivMarker

"leaflet": "1.9.4"
"react": "18.2.0"
"react-leaflet": "4.2.1"

[lindaifu]

import ReactDOMServer from 'react-dom/server'
import L from 'leaflet'
import { Marker } from "react-leaflet"

...

const divIcon = L.divIcon({
      html: ReactDOMServer.renderToString(content)
})

...

[IanMayo]

@lindaifu - your chances of getting support will be greatly increased if you fill in the issue template that is offered when you click on New Issue.