Как я могу добавить вложенный список в material.io (mdc-list)

Question

Я добавил material.io в свой реактивный проект. Мне нужен был вложенный список в моем проекте. Я использую класс mdc-list для создания списка. Теперь, как я могу добавить вложенный список в список MDC. Вот мой код для создания списка MDC.

        <ul className="mdc-list">
          <li
            className="mdc-list-item mdc-list-item--activated"
            href="#"
            ariaSelected="true"
          >
            <span className="mdc-list-item__text">Inbox</span>
          </li>
          <li className="mdc-list-item " href="#">
            <span className="mdc-list-item__text">Inbox</span>
          </li>
          <li className="mdc-list-item" href="#">
            <span className="mdc-list-item__text">Outgoing</span>
          </li>
        </ul>

Но я хочу добавить вложенный список, например

        <ul className="mdc-list">
          <li
            className="mdc-list-item mdc-list-item--activated"
            href="#"
            ariaSelected="true"
          >
            <span className="mdc-list-item__text">Inbox</span>
          </li>
          <li className="mdc-list-item " href="#">
            <span className="mdc-list-item__text">Inbox</span>
          </li>
          <li className="mdc-list-item" href="#">
            <span className="mdc-list-item__text">Outgoing</span>
            <ul className="mdc-list">
             <li className="mdc-list-item " href="#">
             <span className="mdc-list-item__text">Inbox</span>
             </li>
             <li className="mdc-list-item" href="#">
             <span className="mdc-list-item__text">Outgoing</span>
             </li>
            </ul>
         </li>
        </ul>