From 717495ee1c267e899eb3b73182c39a4cd9f4f48a Mon Sep 17 00:00:00 2001
From: Guilherme Datilio Ribeiro <guilhermedatilio@gmail.com>
Date: Wed, 24 Jan 2024 09:27:45 -0300
Subject: [PATCH] Accordion controlled  (#15589)

* fix: added controlled state back

* fix: removed test story

* fix: removed test story
---
 .../components/Accordion/Accordion.stories.js | 399 ------------------
 .../components/Accordion/AccordionItem.tsx    |   6 +
 2 files changed, 6 insertions(+), 399 deletions(-)

diff --git a/packages/react/src/components/Accordion/Accordion.stories.js b/packages/react/src/components/Accordion/Accordion.stories.js
index 079e34141371..02ff315ca1b7 100644
--- a/packages/react/src/components/Accordion/Accordion.stories.js
+++ b/packages/react/src/components/Accordion/Accordion.stories.js
@@ -15,13 +15,6 @@ import {
 } from '../Accordion';
 import Button from '../Button';
 import mdx from './Accordion.mdx';
-import { Information } from '@carbon/icons-react';
-import {
-  ToggletipLabel,
-  Toggletip,
-  ToggletipButton,
-  ToggletipContent,
-} from '../Toggletip';
 
 import { WithLayer } from '../../../.storybook/templates/WithLayer';
 
@@ -76,398 +69,6 @@ export const Default = () => (
   </Accordion>
 );
 
-export const Test = () => (
-  <Accordion>
-    <AccordionItem title="Item 1">
-      <ToggletipLabel>Toggletip label</ToggletipLabel>
-      <Toggletip align="top">
-        <ToggletipButton label="Show information">
-          <Information />
-        </ToggletipButton>
-        <ToggletipContent>
-          <p>
-            Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
-            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
-          </p>
-        </ToggletipContent>
-      </Toggletip>
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>{' '}
-      <div>content is still rendered when accordion is collapsed</div>
-    </AccordionItem>
-    <AccordionItem title="Item 2" open>
-      <p>HELLO</p>
-    </AccordionItem>
-  </Accordion>
-);
-
 export const _WithLayer = () => (
   <WithLayer>
     <Accordion>
diff --git a/packages/react/src/components/Accordion/AccordionItem.tsx b/packages/react/src/components/Accordion/AccordionItem.tsx
index ad19567807a5..d8a39833903d 100644
--- a/packages/react/src/components/Accordion/AccordionItem.tsx
+++ b/packages/react/src/components/Accordion/AccordionItem.tsx
@@ -118,6 +118,7 @@ function AccordionItem({
   ...rest
 }: PropsWithChildren<AccordionItemProps>) {
   const [isOpen, setIsOpen] = useState(open);
+  const [prevIsOpen, setPrevIsOpen] = useState(open);
   const accordionState = useContext(AccordionContext);
 
   const disabledIsControlled = typeof controlledDisabled === 'boolean';
@@ -138,6 +139,11 @@ function AccordionItem({
 
   const content = useRef<HTMLDivElement>(null);
 
+  if (open !== prevIsOpen) {
+    setIsOpen(open);
+    setPrevIsOpen(open);
+  }
+
   // When the AccordionItem heading is clicked, toggle the open state of the
   // panel
   function onClick(event) {