done change in spoiler

src/App.tsx

@@ -15,7 +15,7 @@ const SecondsTimer = ({ seconds }: ISecondsTimerProps) => {
 function App() {
   return (
     <div className={s.appWrapper}>
-      <Spoiler header={<h1>Spoiler</h1>} open>
+      <Spoiler header={<h1>Spoiler</h1>}>
         <p>It works !</p>
       </Spoiler>
       <RangeInput min={2} max={10} />

src/components/Spoiler/Spoiler.tsx

@@ -1,19 +1,22 @@
 import s from './Spoiler.module.css';
+import { useState } from 'react';
 
 interface ISpoilerProps {
   header?: React.ReactNode;
-  open?: boolean;
   children?: React.ReactNode;
 }
 
-const Spoiler = ({ header, open, children }: ISpoilerProps) => {
-  return open ? (
+const Spoiler = ({ header, children }: ISpoilerProps) => {
+  const [open, setOpen] = useState(false);
+  const handleOpen = () => setOpen(!open);
+  return (
     <div className={s.spoilerWrapper}>
       {header && header}
-      <h2>This is hidden content in Spoiler component</h2>
-      {children && children}
+      <button onClick={handleOpen}>{open ? 'Click Hide' : 'Click Show'}</button>
+      {open && <h2>This is hidden content in Spoiler component</h2>}
+      {open && children && children}
     </div>
-  ) : null;
+  );
 };
 
 export default Spoiler;