Open popup in react-leaflet and mapping over custom markers

Question

In my next.js app, I have on the left side a list of all my shops, and on the right side a leaflet map of the city. For each shops, there is a marker with a popup that can be opened by clicking on the marker. When clicking on the "See on map" button of one of the shop, I want the Popup of the selected shop to open automatically. I've seen in this stackoverflow question that this was achievable. I've done it, and it works! Hurra. But the problem is that is doesn't anymore when I map over my Custom marker.

Basically: having my Custom Markers presented as such: (one by one....

  <CustomMarker
         map={map}
         data={{
                position: [pos1, pos2]
            }}
            isActive={isActiveIndexPopup === 0 ? true : false}
        />

<CustomMarker
         map={map}
         data={{
                position: [pos1, pos2]
            }}
            isActive={isActiveIndexPopup === 1 ? true : false}
        />

This works!!
But when I map

 positions.map((position, i) =\> (
                    <CustomMarker
                        map={map}
                        data={{ position }}
                        key={i}
                        isActive={isActiveIndexPopup === i ? true : false}
                      />
                ))

They do display on the map, I can open the Popup by clicking on it, everything is normal. But if I try to open them by setting their index to active, it runs the error : "latlng is undefined" . Error happens on this line

    popupRef.openOn(map);

Here is the code for the CustomMarker

const CustomMarker = ({ isActive, data, map, monteurs }) => {


    const [refReady, setRefReady] = useState(false);
    let popupRef = useRef();

    useEffect(() => {
        
            if (refReady && isActive) {
                popupRef.openOn(map);
            }
        
    }, [isActive, refReady, map]);
    
    return (
        <Marker
            position={data.position}
           
            <Popup
                ref={(r) => {
                    popupRef = r;
                    setRefReady(true);
                }}
            >
               Here is the shop.
            </Popup>


        </Marker>
    )
}

export default CustomMarker

I tried using only 1 location at a time, and each time the isActiveIndexPopup is set to true, it doesn't work.

I need to get it mapping over the component because I have many many shops.

Thank you