diff --git a/src/content/learn/sharing-state-between-components.md b/src/content/learn/sharing-state-between-components.md
index 52eaf28f85d..5543c661992 100644
--- a/src/content/learn/sharing-state-between-components.md
+++ b/src/content/learn/sharing-state-between-components.md
@@ -133,27 +133,29 @@ In this example, it's the `Accordion` component. Since it's above both panels an
 import { useState } from 'react';
 
 export default function Accordion() {
+  const [isActive, setIsActive] = useState(false);
+
   return (
     <>
       <h2>Almaty, Kazakhstan</h2>
-      <Panel title="About" isActive={true}>
+      <Panel title="About" isActive={isActive} onShow={() => setIsActive(true)}>
         With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city.
       </Panel>
-      <Panel title="Etymology" isActive={true}>
+      <Panel title="Etymology" isActive={isActive} onShow={() => setIsActive(true)}>
         The name comes from <span lang="kk-KZ">алма</span>, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild <i lang="la">Malus sieversii</i> is considered a likely candidate for the ancestor of the modern domestic apple.
       </Panel>
     </>
   );
 }
 
-function Panel({ title, children, isActive }) {
+function Panel({ title, children, isActive, onShow }) {
   return (
     <section className="panel">
       <h3>{title}</h3>
       {isActive ? (
         <p>{children}</p>
       ) : (
-        <button onClick={() => setIsActive(true)}>
+        <button onClick={onShow}>
           Show
         </button>
       )}