make Accordion component reusable

[angeloilardi]

I'm trying to set the content of the accordion panels via props to make the component reusable like so:

function AccordionContent(props: {title:string, content: string }) {
    return (
      <Accordion.Panel>
        <Accordion.Title className="text-2xl md:text-4xl">
          {props.title}
        </Accordion.Title>
        <Accordion.Content>
                {props.content }
        </Accordion.Content>
      </Accordion.Panel>
    );
}

and then passing them as children

function Accordion() {
  return (
        <Accordion>
<AccordionContent 
title = {}
content = {}
/>
 </Accordion>
  );
}

However, only the headings are showing up on the page. The content stays hidden instead of being collapsable. The toggle icon is also missing. What am I doing wrong?

[kayabutterkun]

I'm facing similar problem and I realize it works when you use server components instead. However, I need to use client components and I realize it works when you leave Panel out.

function AccordionContent(props: {title:string, content: string }) {
    return (
      <div>
        <Accordion.Title className="text-2xl md:text-4xl">
          {props.title}
        </Accordion.Title>
        <Accordion.Content>
                {props.content }
        </Accordion.Content>
      </div>
    );
}

function Accordion() {
  return (
        <Accordion>
            <Accordion.Panel>
                <AccordionContent 
                title = {}
                content = {}
                />
            </Accordion.Panel>
         </Accordion>
  );
}

Not sure why. Anyone knows?