Accordion with it's state

src/components/accordion-item.tsx

@@ -1,15 +1,17 @@
-import { } from 'react'
+import { useState } from 'react'
+
+export function AccordionItem({ title, children, isOpen }: { title: string; children: JSX.Element; isOpen?: boolean }) {
+  const [open, setOpen] = useState(isOpen);
 
-export function AccordionItem({ title, children, isOpen, onClick }: { title: string; children: JSX.Element; isOpen: boolean, onClick: () => void; }) {
   return (
     <>
-      <button type="button" className="accordion-title" onClick={onClick}>
+      <button type="button" className="accordion-title" onClick={() => setOpen(!open)}>
         <span>{title}</span>
-        <svg className={"w-3 h-3 shrink-0" + (isOpen ? "" : " rotate-180")} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+        <svg className={"w-3 h-3 shrink-0" + (open ? "" : " rotate-180")} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
           <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5 5 1 1 5" />
         </svg>
       </button>
-      {isOpen && <div className="accordion-body">{children}</div>}
+      {open && <div className="accordion-body">{children}</div>}
     </>
   );
 }

src/components/task-form.tsx

@@ -7,6 +7,7 @@ export function TaskForm({ createTask }: { createTask: (t: Record<string, FormDa
     <form className="grid grid-cols-1 gap-y-8" onSubmit={event => {
       event.preventDefault();
       createTask(Object.fromEntries(new FormData(event.currentTarget)));
+      event.currentTarget.reset();
     }}>
       <div>
         <label htmlFor="type">Tipas</label>