如何在 CoreUI React 的下拉菜单中获取子菜单？

如何解决如何在 CoreUI React 的下拉菜单中获取子菜单？

我使用的是 CoreUI React 免费版。目前要实现一个简单的下拉菜单，这是需要做的

<CDropdown
      inNav
      className="c-header-nav-items mx-2"
      direction="down"
      >

      <CDropdownToggle className="c-header-nav-link" caret={false}>
        <div className="c-avatar">
          <CImg
            src={'avatars/user.jpg'}
            className="c-avatar-img"
            alt="admin@bootstrapmaster.com"
          />
        </div>
      </CDropdownToggle>

      <CDropdownMenu className="pt-0" placement="bottom-end">
        
        <CDropdownItem
          header
          tag="div"
          color="light"
          className="text-center"
        >
          <strong>Account</strong>
        </CDropdownItem>
         
         <CDropdownItem>
          <CIcon name="cil-user" className="mfe-2" />Profile
        </CDropdownItem>
        
        <CDropdownItem>
          <CIcon name="cil-settings" className="mfe-2" />
          Settings
        </CDropdownItem>

        <CDropdownItem>
          <CIcon name="cil-credit-card" className="mfe-2" />
          Payments
        </CDropdownItem>

        <CDropdownItem divider />
        <CDropdownItem> 
          <CIcon name="cil-lock-locked" className="mfe-2" />
          logout
        </CDropdownItem>
      </CDropdownMenu>
</CDropdown>

这是它的样子

现在我想向“设置”添加一个子菜单，这样在单击 Settings 时，会在其左侧打开另一个菜单，我可以单击它以选择适当的项目。像下面的东西

我在网上查找了有关将子菜单集成到 CoreUI 中的下拉菜单的文档，但找不到任何内容。

我能得到的最接近的是对 Settings 部分做这样的事情

<CDropdownItem>
          <CIcon name="cil-settings" className="mfe-2" />
          Settings
          <CDropdownMenu>
            <CDropdownItem>
                Submenu Item 1
            </CDropdownItem>
            <CDropdownItem>
                Submenu Item 2
            </CDropdownItem>
          </CDropdownMenu>
 </CDropdownItem>

现在看起来像下面

但是正如您所看到的，子菜单没有对齐，默认情况下它是可见的，这与首先点击 Settings 然后子菜单应该出现的预期行为相反。

CoreUI 有没有办法支持下拉菜单中的子菜单？或者是否有解决方法？

注意：我使用的是 CoreUI React 免费版，我当前的版本是 3.1.1