Получить рекурсивный компонент React для обновления своих родителей

Question

Я делаю иерархический список на основе этих данных:

export default {
  title: "Hey there",
  elements: [
    {
      id: 1,
      title: "How",
      elements: []
    },
    {
      id: 2,
      title: "are",
      elements: [
        {
          id: 3,
          title: "you",
          elements: []
        },
        {
          id: 4,
          title: "doing?",
          elements: []
        }
      ]
    }
  ]
};

Я создал компонент <ListElement />, который будет выводить заголовок title и рекурсивно отображать любые дочерние элементы:

const ListElement = ({ item, isActive = false }) => {
  const [activeState, setActiveState] = useState(isActive);
  return (
    <li className={classNames("list-element", { active: activeState })}>
      <button
        onClick={() => {
          setActiveState(!activeState);
        }}
      >
        {item.title}
      </button>
      {item.elements.length > 0 && (
        <ul>
          {item.elements.map(child => (
            <ListElement item={child} key={child.id} />
          ))}
        </ul>
      )}
    </li>
  );
};

Я также добавил обработчик щелчков, который будет переключать класс на активном элементе.

Теперь вот задача: я хочу сделать весь набор активных элементов. Так что, если я нажму "делать?" element, все родители также будут активны ("are" и "Hey there").

Я понимаю, что мне нужно передать опору функции от родителя к ребенку (updateParent может быть?), которая связана в родительскую область, а затем обновите его из дочернего, как если бы вы передавали данные формы из контейнера или тому подобного. Но я запутался и не могу понять, как это сделать, теперь у меня есть только один компонент, и я делаю все это рекурсивно?

У меня есть прототип, работающий на Код Песочница здесь . Любая помощь приветствуется!