Marker doesn't stay pinned when zoomed on NextJS 13.5.2

[Lodimup]

Great lib the only problem I have so far is When zoomed the marker moves from its correct position. Thanks!

export const MarkerCard = (props: MarkerCardProps) => {
...
return (
    <Marker
      position={props.location}
      size={[224, 112]}
      riseOnHover
      placement="bottom"
    >
...

      <MapContainer
        className="h-screen w-full bg-gray-100"
        // @ts-ignore
        center={coord}
        zoom={16}
        scrollWheelZoom={false}>
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <HandleLocation />
        <MarkerLayer>
          {DUMMY.map((props, index) => (<MarkerCard key={props.id} {...props}/>))}
        </MarkerLayer>
      </MapContainer>

it seems that this problem is NextJS specific. PaulLeCam/react-leaflet#808 (comment) does not resolve the issue.

[Shadowfita]

Same issue!

[stevenmulgrew]

I've just bumped into the same issue, trying to display numerous React components wrapped in markers using v1.1.4
What has worked for me is setting the position to "absolute" on the div rendered by the marker.
The component offers a ref to the underlying div so you can set the style accordingly.
Hope this helps someone.

const ProjectMarker = ({ project }: ProjectMarkerProps) => {
    
    const ref = React.createRef<HTMLDivElement | null>();

    React.useEffect(() => {
        setTimeout(() => {
            if (ref.current) ref.current.style.position = "absolute";
        }, 0);
    }, [ref]);

    return (
        <Marker
            position={{
                lat: project.latitude,
                lng: project.longitude,
            }}
            innerRef={ref}
        >
            <MyCustomComponent />
        </Marker>
    );
}