I want to pass an SVG icon ( i.e. a Different React Component) in React-Bootstrap Drop Down parameter "title"

Question

I am making a header where Profile icon and Loggedin user should be at the right of the bootstrap Navbar component.

I want to have the UI as below image which I was able to achieve without Drop Down component.

Now in the above image, there are 2 parts icon and user-name(UN) based on the screen size user name would be displayed on the large screen and would be hidden on the small screen. So I want to make both the icon and UN a dropdown selector. But, the React-Bootstrap dropdown is allowing to pass only text and no other component(icon).

Can someone please let me know how to achieve this?

Below code is for rendering the top image

                <Nav.Item>
                  <h3>
                    <PiUserCircleGearDuotone />
                  </h3>
                </Nav.Item>
                <Nav.Item className="text-nowrap ms-2 d-none d-md-block">
                  Priyom Saha
                </Nav.Item>

While using the DropDown component I am not able to pass icon

<NavDropdown
              title={<PiUserCircleGearDuotone /> + "Priyom Saha"}
           
            >
              <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
              <NavDropdown.Item href="#action/3.2">
                Another action
              </NavDropdown.Item>
              <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.Item href="#action/3.4">
                Separated link
              </NavDropdown.Item>
            </NavDropdown>

Answer 1

<Nav className="ms-auto align-items-center" role="button">
 <Dropdown>
  <DropdownToggle className="bg-transparent border-0 d-flex align-items-center">
    <PiUserCircleGearDuotone size={"1.5rem"} />
      <span className="text-nowrap ms-2 d-none d-md-block">
          &nbsp; Priyom Saha
      </span>
      </DropdownToggle>
      <Dropdown.Menu>
        <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
        <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
        <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  </Nav>