Password: The element appears broken when toggleMask is activated and contained inside a "p-inputgroup" div element

Describe the bug

I have found a visual bug when using a Password component with toggleMask activated, and this element is contained inside a "p-inputgroup" div. I'm using slightly modified code from these examples: PrimeReact InputGroup. When using PrimeReact version 10.6.3 or newer, the Password component appears broken.

With version 10.6.2 or older, everything looks OK.

Reproducer

https://stackblitz.com/edit/stackblitz-starters-2j1uag

PrimeReact version

10.6.6

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

Use Primereact 10.6.3+ with this source code:

  <div>
    <div className="p-inputgroup flex-1">
      <span className="p-inputgroup-addon">
        <i className="pi pi-user"></i>
      </span>
      <InputText placeholder="Username" />
    </div>

    <div className="p-inputgroup flex-1">
      <span className="p-inputgroup-addon">$</span>
      <InputNumber placeholder="Price" />
      <span className="p-inputgroup-addon">.00</span>
    </div>

    <div className="p-inputgroup flex-1">
      <span className="p-inputgroup-addon">password</span>
      <Password toggleMask placeholder="password" />
    </div>
  </div>

Expected behavior

No response

Start with the linked StackBlitz reproducer and compare the Password component inside a p-inputgroup between PrimeReact 10.6.2 and 10.6.6. Trace the toggleMask rendering and related input-group styling, then verify that the password field has the expected layout alongside the addon in the provided example.