diff --git a/core/src/components/accordion/accordion.tsx b/core/src/components/accordion/accordion.tsx
index 3e6c835eb7..179a94eed1 100644
--- a/core/src/components/accordion/accordion.tsx
+++ b/core/src/components/accordion/accordion.tsx
@@ -55,7 +55,7 @@ export class Accordion implements ComponentInterface {
    * This prevents the accordion from animating when
    * it starts expanded or collapsed.
    */
-  private skipNextAnimation = false;
+  private skipNextAnimation = true;
 
   @Element() el?: HTMLElement;
 
diff --git a/packages/react/test/base/src/App.tsx b/packages/react/test/base/src/App.tsx
index 2f7f4a63de..634af89f07 100644
--- a/packages/react/test/base/src/App.tsx
+++ b/packages/react/test/base/src/App.tsx
@@ -37,6 +37,7 @@ import KeepContentsMounted from './pages/overlay-components/KeepContentsMounted'
 import OverlayComponents from './pages/overlay-components/OverlayComponents';
 import OverlayHooks from './pages/overlay-hooks/OverlayHooks';
 import ReorderGroup from './pages/ReorderGroup';
+import AccordionGroup from './pages/AccordionGroup';
 
 setupIonicReact();
 
@@ -69,6 +70,7 @@ const App: React.FC = () => (
         <Route path="/icons" component={Icons} />
         <Route path="/inputs" component={Inputs} />
         <Route path="/reorder-group" component={ReorderGroup} />
+        <Route path="/accordion-group" component={AccordionGroup} />
       </IonRouterOutlet>
     </IonReactRouter>
   </IonApp>
diff --git a/packages/react/test/base/src/pages/AccordionGroup.tsx b/packages/react/test/base/src/pages/AccordionGroup.tsx
new file mode 100644
index 0000000000..ffcfaca8bd
--- /dev/null
+++ b/packages/react/test/base/src/pages/AccordionGroup.tsx
@@ -0,0 +1,54 @@
+import { IonHeader, IonTitle, IonToolbar, IonPage, IonContent, IonAccordionGroup, IonAccordion, IonItem, IonLabel } from '@ionic/react';
+import { useEffect, useRef } from 'react';
+
+const AccordionGroup: React.FC = () =>  {
+  const accordionGroup = useRef<null | HTMLIonAccordionGroupElement>(null);
+
+  useEffect(() => {
+    if (!accordionGroup.current) {
+      return;
+    }
+
+    accordionGroup.current.value = ['first', 'third'];
+  }, []);
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Accordion Group</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <IonAccordionGroup ref={accordionGroup} multiple={true}>
+          <IonAccordion value="first">
+            <IonItem slot="header" color="light">
+              <IonLabel>First Accordion</IonLabel>
+            </IonItem>
+            <div className="ion-padding" slot="content">
+              First Content
+            </div>
+          </IonAccordion>
+          <IonAccordion value="second">
+            <IonItem slot="header" color="light">
+              <IonLabel>Second Accordion</IonLabel>
+            </IonItem>
+            <div className="ion-padding" slot="content">
+              Second Content
+            </div>
+          </IonAccordion>
+          <IonAccordion value="third">
+            <IonItem slot="header" color="light">
+              <IonLabel>Third Accordion</IonLabel>
+            </IonItem>
+            <div className="ion-padding" slot="content">
+              Third Content
+            </div>
+          </IonAccordion>
+        </IonAccordionGroup>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default AccordionGroup;
diff --git a/packages/react/test/base/src/pages/Main.tsx b/packages/react/test/base/src/pages/Main.tsx
index dd87350d9b..3873cd3d5b 100644
--- a/packages/react/test/base/src/pages/Main.tsx
+++ b/packages/react/test/base/src/pages/Main.tsx
@@ -22,6 +22,9 @@ const Main: React.FC<MainProps> = () => {
       </IonHeader>
       <IonContent>
         <IonList>
+          <IonItem routerLink="/accordion-group">
+            <IonLabel>Accordion Group</IonLabel>
+          </IonItem>
           <IonItem routerLink="/overlay-hooks">
             <IonLabel>Overlay Hooks</IonLabel>
           </IonItem>