Leaflet Map open popup in markercluster from outside with react-leaflet and react-leaflet-markercluster

Question

I encountered an issue with combining two functionalities: placing Markers in a group using the MarkerCluster plugin (https://tomickigrzegorz.github.io/react-leaflet-examples/#/marker-grouping-markercluster-plugin) and referencing Markers outside the map (https://tomickigrzegorz.github.io/react-leaflet-examples/#/controlling-the-map-from-outside-the-map) in order to display a popup when a Marker is clicked.

If we click the link in ListMarkers (from the "controlling-the-map-from-outside-the-map" example), navigating to the Marker works, but the popup doesn't appear.

I'm providing the following combination to illustrate exactly what I mean:

import { useRef, useEffect, useState } from "react";
import { MapContainer, useMap, TileLayer, Marker, Popup } from "react-leaflet";
import styles from "./controlling-the-map-from-outside-the-map.module.css";
import tileLayer from "../util/tileLayer";

import MarkerClusterGroup from 'react-leaflet-markercluster';

import 'react-leaflet-markercluster/dist/styles.min.css';


const center = [52.2295, 21.01];

const points = [
  {
    id: "1",
    lat: 52.228785157729114,
    lng: 21.006867885589603,
    title: "Marker 1",
  },
  {
    id: "2",
    lat: 52.22923201880194,
    lng: 21.00897073745728,
    title: "Marker 2",
  },
  {
    id: "3",
    lat: 52.22963944703663,
    lng: 21.01091265678406,
    title: "Marker 3",
  },
  {
    id: "4",
    lat: 52.229928587386496,
    lng: 21.01218938827515,
    title: "Marker 4",
  },
];

const ListMarkers = ({ onItemClick }) => {
  return (
    <div className={styles.markersList}>
      {points.map(({ title }, index) => (
        <div
          className={styles.markerItem}
          key={index}
          onClick={(e) => {
            e.preventDefault();
            onItemClick(index);
          }}
        >
          {title}
        </div>
      ))}
    </div>
  );
};

const MyMarkers = ({ data, selectedIndex }) => {
  return data.map((item, index) => (
    <PointMarker
      key={index}
      content={item.title}
      center={{ lat: item.lat, lng: item.lng }}
      openPopup={selectedIndex === index}
    />
  ));
};

const PointMarker = ({ center, content, openPopup }) => {
  const map = useMap();
  const markerRef = useRef(null);

  useEffect(() => {
    if (openPopup) {
      map.flyToBounds([center]);
      markerRef.current.openPopup();
    }
  }, [map, center, openPopup]);

  return (
    <Marker ref={markerRef} position={center}>
      <Popup>{content}</Popup>
    </Marker>
  );
};

const MapWrapper = () => {
  const [selected, setSelected] = useState();

  function handleItemClick(index) {
    setSelected(index);
  }

  return (
    <>
      <MapContainer center={center} zoom={16} scrollWheelZoom={false}>
        <TileLayer {...tileLayer} />

        <MarkerClusterGroup>
          <MyMarkers selectedIndex={selected} data={points} />
        </MarkerClusterGroup>
      </MapContainer>

      <ListMarkers data={points} onItemClick={handleItemClick} />
    </>
  );
};

export default MapWrapper;

If we remove MarkerClusterGroup ... MarkerClusterGroup from the above example, navigating to the Markers works, and the popup appears.

I came across an example (https://tomickigrzegorz.github.io/leaflet-examples/#74.open-popup-markercluster-from-outside) that has this exact functionality, but I'm having trouble to move it into a React component.

How to adjust exampt https://tomickigrzegorz.github.io/leaflet-examples/#74.open-popup-markercluster-from-outside to react flow using react-leaflet and react-leaflet-markercluster?