Отображение выбранных элементов во вложенной структуре

Question

Я боролся с этой проблемой уже много часов, вы, ребята, моя последняя надежда!

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

https://i.stack.imgur.com/I0H1r.png

Для некоторых более поздних целей мне нужно различать выбранные элементы со свойством selected , установленным в true или false.Поэтому в теории мне нужно только создать селектор, отфильтровать мою структуру и вернуть элементы с этим свойством, установленным в true.

Но моя структура - полный беспорядок, и я не могу понять, как его отфильтроватьправильно ...

export interface BoardList {
    id: number;
    name: string;
    mac: string;
    rcbs: Array<rcbs>;
    type: string;
}

export interface rcbs {
    icbs: Array<icbs>;
    id: number;
    mac: string;
    version: string;
    selected: boolean;
    type: string;
}

export interface icbs {
    head: head;
    id: number;
    mac: string;
    version: string;
    selected: boolean;
    type: string;
}

(Изображение, если вы предпочитаете видеть его в инспекторе: https://i.stack.imgur.com/g1bWE.png)

Что-то еще делает мою задачу действительно трудной, мне нужно отличать icbs от rcbs,Я не могу выбрать оба элемента одновременно.

tldr: Как отобразить элементы со свойством selected = true с учетом этой предыдущей структуры и отображать только "rcbs" или только "icbs"«