Как реализовать многоуровневый выпадающий список на React

Передо мной стоит задача из двух json-файлов построить многоуровневый список

Файлы: https://yadi.sk/d/k9GCcUo72cfRvg?w=1

Что должно получиться в итоге:

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

В основном моя проблема состоит в том, что я не понимаю как сделать так, чтобы если уровень был самый нижний - то, у меня должен меняться reducer 'products' (хочу передавать в onClick id данной секции), а если нет - то просто должен открываться выпадающий список уровнем вложенности ниже.

Я не понимаю, стоит ли менять state при каждом нажатии на секцию или стоит менять его только при нажатии на нижний уровень.

Вот здесь наглядно показано, что я хочу в итоге получить: https://valeriimakhniuk.github.io/docsvision-test-task/

Только я хочу реализовать это без готовых компонентов

Буду благодарен любой помощи: начиная от того, что лучше преобразовать формат полученных данных до полного решения и подсказок как лучше зарендерить список

Возможно кто-то реализовывал это нативным образом ранее