Inner Accordion Closes When Outer Accordion is Toggled in Angular with PrimeNG

I am working with Angular and PrimeNG and have a nested accordion, with one accordion inside another. The issue is that when I open the inner accordion and leave it open, and then open and close the outer accordion, the inner accordion closes very quickly, almost like a "flash," and does not stay open. I have set the outer accordion to start with the first tab open (`[activeIndex]="0"`), and the inner accordion also has an active tab. However, when I click on the outer accordion and close it, then open it again, the inner accordion closes again. How can I prevent this behavior and keep the inner accordion open when the outer accordion is opened again? Here is my code:

<p-accordion [activeIndex]="0">
<p-accordionTab header="Header I">
<div>
<p-accordion [activeIndex]="0">
<p-accordionTab header="Header I">
<p>111</p>
<p-accordion [activeIndex]="0">
<p-accordionTab header="Header I">
<p>222</p>
</p-accordionTab>
</p-accordion>
</p-accordionTab>
</p-accordion>
</div>
</p-accordionTab>
</p-accordion>

Continue reading...