How to display data when clicking on a marker React-leaflet

Linda

I have a react-leaflet map on the left side of the screen, and a sidebar on the left side that contains a list of houses. A picture of the house and its description should be displayed there. The task is what needs to be done so that when you click on the marker on the map, the desired house in the sidebar becomes 1 in the list. That is, there are 3 markers on the map, when you click on 2 markers - in the list 2, the house drops to 1 place. How can this be implemented?

List.js(sidebar list):

import ListItem from "./ListItem/ListItem";

const listObj = [
  {
    title: "House 1",
  },
  {
    title: "House 2",
  },
  {
    title: "House 3",
  },
];

function HouseList() {
  return listObj.map((house, index) => {
    return <ListItem key={index} title={house.title} />;
  });
}

const List = () => {
  return (
    <div style={{ width: "50%" }}>
      <HouseList />
    </div>
  );
};

export default List;

Map.js(map with markers):

const center = [0000, 0000];

const arrCoordinates = [
  [0000, 0000],
  [0000, 0000],
  [0000, 0000],
];

const defaultIcon = L.icon({
  iconUrl: icon,
  shadowUrl: iconShadow,
});

function MultipleMarkers() {
  return arrCoordinates.map((coordinata, index) => {
    return (
      <Marker key={index} position={coordinata} icon={defaultIcon}></Marker>
    );
  });
}

const Map = () => {
  return (
    <div style={{ width: "100%" }}>
      <MapContainer
        center={center}
        zoom={13}
        scrollWheelZoom={false}
        style={{ height: "100vh" }}
      >
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <MultipleMarkers />
      </MapContainer>
    </div>
  );
};

export default Map;