How to group sub menu's in ant design

Question

I am new to Ant design. Here, I am trying to a responsive navbar therefore I want to hide some items of my navbar based on breakpoints. For that intention, I need to group some submenu into a group in the menu. But when I do this by using div's my navbar layout drops horizontal to vertical. My code is,

<Menu
      className={navbarClasses.join(" ")}
      mode="horizontal"
      style={{ padding: "5px", fontSize: "15px" }}
    >
      {/* <Item icon={<MenuOutlined />} /> */}
      <Item className="logo_bottom">
        <img alt="logo" src={logo} className="logo" />
      </Item>

      <>
        <SubMenu title="Demos" style={{ marginTop: "14px" }}>
          <Item>
            <a
              target="_blank"
              rel="noopener noreferrer"
              href="https://www.antgroup.com"
            >
              Modern
            </a>
          </Item>
          <Item>Classic</Item>
          <Item>Vintage</Item>
          <Item>Standard</Item>
          <Item>Minimal</Item>
          <Item>Trendy</Item>
          <Item>Elegant</Item>
        </SubMenu>
        <SubMenu key="smenu" title="Categories" style={{ marginTop: "14px" }}>
          <Item className="ant-dropdown-link">Fresh Vegetables</Item>
          <Item>Diet Nutrition</Item>
          <Item> Healthy Foods</Item>
          <Item> Grocery Items</Item>
          <Item> Beaf Steak</Item>
        </SubMenu>
        <SubMenu key="ssmenu" title="Dietary" style={{ marginTop: "14px" }}>
          <Item className="ant-dropdown-link"> Vegetarian</Item>
          <Item> Kakogenic</Item>
          <Item> Mediterranean</Item>
          <Item>Organic</Item>
        </SubMenu>
        <Item style={{ marginTop: "14px" }}>Search</Item>
        <SubMenu
          title="Pages"
          style={{ marginRight: "auto", marginTop: "14px" }}
        >
          <SubMenu title="Users">
            <Item>My Account</Item>
            <Item>Sign In</Item>
            <Item>Sign Up</Item>
          </SubMenu>
          <Item>FAQ About Us</Item>
          <Item>Privacy Policy</Item>
          <Item>Terms & Condition</Item>
          <Item>Contact Us</Item>
          <Item>Checkout</Item>
          <Item>404</Item>
        </SubMenu>
      </>

      <Item style={{ marginTop: "14px" }}>
        <Dropdown overlay={menu} trigger={["click"]}>
          <a className="ant-dropdown-link" onClick={(e) => e.preventDefault()}>
            <img alt="uk" src={ukLogo} className="lan-images" />
            English - EN <DownOutlined />
          </a>
        </Dropdown>
      </Item>
      <Item style={{ marginTop: "14px" }}>
        <Button
          icon={<ShoppingCartOutlined style={{ fontSize: "20px" }} />}
          type="text"
          size="large"
        >
          Cart
        </Button>
      </Item>
      <Item style={{ marginTop: "14px" }}>
        <Button
          icon={<UserOutlined style={{ fontSize: "20px" }} />}
          type="text"
          shape="round"
        >
          Sign In
        </Button>
      </Item>
    </Menu>

so how to group those sub menus? Thanks in advance.