Заменить компонент при клике на другой компонент

Есть компонент список точек маршрута. Есть компонент точки и компонент редактирования точки маршрута. При клике на кнопку необходимо менять компонент точки на компонент редактирования. Но на странице должен быть открыт только один комп редактирования. При повторном клике на кнопку точки нужно закрыть редактирование и открыть его в кликнутой точке. Понимаю, что лучше привязаться к id, делать сравнение и менять компоненты, но на код это понимание переложить не могу.

Зарание спасибо!

import {useState} from "react";

function PointComponent() {
  const [isClicked, setClicked] = useState < boolean > (false);

  const handleOnClick = () => {
    setClicked(true);
  };

  return (
    <>
      {isClicked ?
        <EditPointComponent/> :
        (<li className="trip-events__item">
          <button
            className="event__rollup-btn"
            type="button"
            onClick={handleOnClick}
          >
          </button>
        </li>)}
    </>
  )
}

export default PointComponent;

function PointsList() {

  return (
    <>
      {points.map((point) => (
        <PointComponent
          point={point}
          key={point.id}
          isActive={() => setActivePoint(point.id)}
        />
      ))}
    </>
  );
}

export default PointsList;